Commentaire: Cet article présente un exemple de l'effet de rotation du canevas que JS et HTML5 peuvent être utilisés.
Le code de Keleyi.htm est le suivant:
<! Doctype html>
<html>
<adal>
<Title> HTML Toile rotative </TITAL>
<script type = "text / javascript" src = "/ jQuery-1.10.2.min.js"> </ script>
<script type = "text / javascript" src = "jb51.js"> </ script>
</ head>
<body>
<lebvas> </ canvas>
</docy>
</html>
Le code de JB51.js est le suivant:
/ *
* Fonction: rotation de la toile
* /
(fonction(){
var toile = null,
contexte = null,
angle = 0;
fonction resetCanvas () {
canvas = document.getElementById ("JB51");
canvas.width = window.innerwidth;
canvas.height = window.innerHeight;
context = canvas.getContext ("2d");
}
fonction animate () {
context.save ();
essayer{
// effacer la toile
context.clearrect (0, 0, canvas.width, canvas.height);
// Définissez l'origine
context.translate (canvas.width * 0,5, canvas.height * 0,5);
// Angle de rotation
context.rotate (angle);
// définir la couleur de remplissage
context.fillStyle = "# ff0000";
// dessiner le rectangle
context.fillrect (-30, -30, 60, 60);
angle + = 0,05 * math.pi;
}
Enfin{
context.Restore ();
}
}
$ (fenêtre) .bind ("redimensi", resetCanvas) .bind ("réorientation", resetCanvas);
$ (document) .ready (function () {
window.scrollto (0,1);
resetCanvas ();
setInterval (animate, 40);
});
}) ();