Komentar: Artikel ini memperkenalkan contoh efek rotasi kanvas yang dapat digunakan JS dan HTML5.
Kode Keleyi.htm adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> HTML Rotating Canvas </iteme>
<type script = "text/javascript" src = "/jQuery-1.10.2.min.js"> </script>
<script type = "text/javaScript" src = "jb51.js"> </script>
</head>
<body>
<Canvas> </an Canvas>
</body>
</html>
Kode JB51.JS adalah sebagai berikut:
/*
* Fungsi: Rotasi Kanvas
*/
(fungsi(){
var canvas = null,
konteks = nol,
sudut = 0;
function resetCanvas () {
canvas = document.geteLementById ("jb51");
canvas.width = window.innerwidth;
canvas.height = window.innerheight;
konteks = canvas.getContext ("2d");
}
fungsi animate () {
Context.Save ();
mencoba{
// Bersihkan kanvas
context.clearrect (0, 0, canvas.width, canvas.height);
// Atur asal
Context.translate (Canvas.Width * 0,5, Canvas.Height * 0,5);
// sudut rotasi
context.rotate (sudut);
// Atur Warna Isi
context.fillstyle = "#ff0000";
// Gambar persegi panjang
context.fillrect (-30, -30, 60, 60);
sudut += 0,05 * math.pi;
}
Akhirnya{
Context.Restore ();
}
}
$ (window) .bind ("mengubah ukuran", resetCanvas). BIND ("Reorient", ResetCanvas);
$ (dokumen) .ready (function () {
window.scrollto (0,1);
resetcanvas ();
setInterval (Animate, 40);
});
}) ();