Comentario: Este artículo presenta un ejemplo del efecto de rotación del lienzo que se pueden usar JS y HTML5.
El código de keleyi.htm es el siguiente:
<! Doctype html>
<html>
<Evista>
<title> html lienzo giratorio </title>
<script type = "text/javaScript" src = "/jQuery-1.10.2.min.js"> </script>
<script type = "text/javaScript" src = "jb51.js"> </script>
</ablo>
<Body>
<Canvas> </Canvas>
</body>
</html>
El código de JB51.JS es el siguiente:
/*
* Función: rotación de lienzo
*/
(función(){
Var Canvas = NULL,
contexto = nulo,
ángulo = 0;
función resetCanvas () {
Canvas = document.getElementById ("JB51");
Canvas.Width = Window.InnerWidth;
Canvas.Height = Window.InnerHeight;
context = canvas.getContext ("2d");
}
función animate () {
context.save ();
intentar{
// borrar el lienzo
context.ClearRect (0, 0, Canvas.Width, Canvas.Height);
// Establecer el origen
context.translate (Canvas.Width * 0.5, Canvas.Height * 0.5);
// ángulo de rotación
context.rotate (ángulo);
// establecer color de relleno
context.fillstyle = "#FF0000";
// dibujar rectángulo
context.fillrect (-30, -30, 60, 60);
ángulo += 0.05 * Math.pi;
}
Finalmente{
context.restore ();
}
}
$ (ventana) .bind ("cambiar de tamaño", resetcanvas) .bind ("reorient", resetCanvas);
$ (documento) .Ready (function () {
Window.scrollto (0,1);
resetCanvas ();
setInterval (animate, 40);
});
}) ();