Comentário: Este artigo grava um aplicativo de relógio HTML5 para tentar definir a transformação de tradução e rotação da transformação de coordenadas, bem como o desenho do caminho da tela HTML5, BeginPath, ClosePath, Rec, ARC, etc., e você pode enviar diretamente o código e consultar.
No artigo anterior, aprendemos sobre a tela do HTML5. Escusado será dizer que podemos tentar escrever um aplicativo de relógio HTML5. Aqui, definimos principalmente a transformação de tradução e rotação da transformação de coordenadas, bem como o desenho do caminho da tela HTML5, BeginPath, ClosePath, Rec, Arc, etc., e os importantes mecanismos de poupança e recuperação de estado de desenho do desenho de caminho de tela HTML5, salvar, restaurar.Não vou dizer muito, basta fazer o upload do código. Se você tiver alguma dúvida, faça perguntas e me dê conselhos.
As renderizações abaixo:
Código:
<html>
<head>
</head>
<Body>
<lévas> Seu navegador não o suporta </lvas>
<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, verdadeiro);
cxt.fill ();
cxt.closePath ();
CXT.BEGINPATH ();
cxt.strokestyle = "#00f";
cxt.arc (200, 150, 100, 0, 2 * math.pi, verdadeiro);
cxt.stroke ();
cxt.closePath ();
CXT.BEGINPATH ();
CXT.Translate (200, 150); // planta a origem;
cxt.rotate (-math.pi / 2);
cxt.save ();
for (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);
} outro {
// cxt.strokestyle = "#00f";
cxt.fillrect (90, 0, 10, 2);
}
//document.getElementById("div1").innerText + = "" + i;
cxt.rotate (math.pi / 30);
}
cxt.closePath ();
var ls = 0, lm = 0, lh = 0;
função 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>