Kommentar: In diesem Artikel wird ein Beispiel für den Leinwand -Rotationseffekt vorgestellt, dass JS und HTML5 verwendet werden können.
Der Code von keleyi.htm lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title> html rotierende Leinwand </title>
<script type = "text/javaScript" src = "/jQuery-1.10.2.min.js"> </script>
<script type = "text/javaScript" src = "jb51.js"> </script>
</head>
<body>
<Canvas> </canvas>
</body>
</html>
Der Code von jb51.js lautet wie folgt:
/*
* Funktion: Leinwandrotation
*/
(Funktion(){
var canvas = null,
Kontext = null,
Winkel = 0;
Funktion ResetCanvas () {
canvas = document.getElementById ("JB51");
canvas.width = window.innnerwidth;
canvas.height = window.innerHeight;
context = canvas.getContext ("2d");
}
Funktion animate () {
context.save ();
versuchen{
// die Leinwand löschen
context.clearRect (0, 0, canvas.width, canvas.height);
// Setzen Sie den Ursprung
context.translate (canvas.width * 0,5, canvas.height * 0,5);
// Rotationswinkel
context.rotate (Winkel);
// Füllfarbe einstellen
context.fillstyle = "#ff0000";
// Rechteck zeichnen
Context.FillRect (-30, -30, 60, 60);
Winkel += 0,05 * math.pi;
}
Endlich{
context.restore ();
}
}
$ (Fenster) .bind ("Größe", Resetcanvas) .bind ("Reorient", Resetcanvas);
$ (Dokument) .Ready (function () {
Fenster.Scrollto (0,1);
Resetcanvas ();
setInterval (Animate, 40);
});
}) ();