Comentario: Este artículo escribe una aplicación de reloj HTML5 para tratar de establecer la transformación de traducción y rotación de la transformación de coordenadas, así como el dibujo de ruta del lienzo HTML5, BeginPath, ClosePath, Rec, ARC, etc., y puede cargar directamente el código y referirse a él.
En el artículo anterior, aprendimos sobre el lienzo de HTML5. No hace falta decir que podemos intentar escribir una aplicación de reloj HTML5. Aquí establecemos principalmente la traducción y la transformación de rotación de la transformación de coordenadas, así como el dibujo de ruta del lienzo HTML5, BeginPath, Closepath, Rec, Arc, etc., y los importantes mecanismos de ahorro y recuperación del estado de dibujo del dibujo de ruta de lona HTML5, salvar, restaurar.No diré mucho, solo sube el código. Si tiene alguna pregunta, haga preguntas y dame consejos.
Las representaciones a continuación:
Código:
<html>
<Evista>
</ablo>
<Body>
<Vasvas> Su navegador no lo admite </levas>
<script type = "text/javaScript">
var c = document.getElementById ("mycanvas");
var cxt = c.getContext ("2d");
var slen = 60;
var mlen = 50;
var hlen = 40;
cxt.Strokerect (0, 0, C.Width, C.Height);
cxt.beginpath ();
cxt.strokestyle = "#00f";
cxt.fillstyle = "#00f";
cxt.arc (200, 150, 5, 0, 2 * Math.pi, verdadero);
cxt.fill ();
cxt.ClosePath ();
cxt.beginpath ();
cxt.strokestyle = "#00f";
cxt.arc (200, 150, 100, 0, 2 * Math.pi, verdadero);
cxt.stroke ();
cxt.ClosePath ();
cxt.beginpath ();
cxt.translate (200, 150); // Planta el origen;
cxt.rotate (-math.pi / 2);
cxt.save ();
para (var i = 0; i <60; i ++) {
if (i % 5 == 0) {
// cxt.fillstyle = "#FF0000";
cxt.fillrect (80, 0, 20, 5);
cxt.fillText ("" + (i / 5 == 0? 12: i / 5), 70, 0);
} demás {
// cxt.strokestyle = "#00f";
cxt.fillrect (90, 0, 10, 2);
}
//document.getElementByid("div1").inntext + = "" + i;
cxt.rotate (math.pi / 30);
}
cxt.ClosePath ();
var ls = 0, lm = 0, lh = 0;
función refresh () {
cxt.restore ();
cxt.save ();
cxt.rotate (ls * math.pi / 30);
cxt.ClearRect (5, -1, Slen+1, 2+2);
cxt.restore (); cxt.save ();
cxt.rotate (lm * math.pi / 30);
cxt.ClearRect (5, -1, Mlen+1, 3+2);
cxt.restore (); cxt.save ();
cxt.rotate (lh * math.pi / 6);
cxt.ClearRect (5, -3, HLen+1, 4+2);
VAR TIME = new Date ();
var s = ls = time.getSeconds ();
var m = lm = time.getminutes ();
var h = lh = time.gethours ();
cxt.restore ();
cxt.save ();
cxt.rotate (s * math.pi / 30);
cxt.fillrect (5, 0, Slen, 2);
cxt.restore (); cxt.save ();
cxt.rotate (m * math.pi / 30);
cxt.fillrect (5, 0, mlen, 3);
cxt.restore (); cxt.save ();
cxt.rotate (h * math.pi / 6);
cxt.fillrect (5, -2, hlen, 4);
}
var myInterval = setInterval ("refresh ();", 1000);
</script>
<div> </div>
</body>
</html>