Commentaire: Cet article écrit une application d'horloge HTML5 pour essayer de définir la transformation de traduction et de rotation de la transformation des coordonnées, ainsi que le dessin de chemin de la toile HTML5, BeginPath, ClosePath, Rec, Arc, etc., et vous pouvez télécharger directement le code et vous y référer.
Dans l'article précédent, nous avons appris sur toile de HTML5. Inutile de dire que nous pouvons essayer d'écrire une application d'horloge HTML5. Ici, nous définissons principalement la transformation de la traduction et de la rotation de la transformation des coordonnées, ainsi que le dessin de chemin de la toile HTML5, Beginpath, ClosePath, Rec, Arc, etc., et l'important des mécanismes de sauvegarde et de récupération d'état de dessin important du dessin de trajet en toile HTML5, de la sauvegarde, de la restauration.Je ne dirai pas grand-chose, il suffit de télécharger le code. Si vous avez des questions, posez des questions et donnez-moi des conseils.
Les rendus ci-dessous:
Code:
<html>
<adal>
</ head>
<body>
<Alevas> Votre navigateur ne le prend pas en charge </ Canvas>
<script type = "text / javascript">
var c = document.getElementById ("myCanvas");
var cxt = c.getContext ("2d");
var slen = 60;
var mlen = 50;
var hlen = 40;
cxt.strokect (0, 0, C.Width, C.Height);
cxt.beginPath ();
cxt.strokestyle = "# 00f";
cxt.fillStyle = "# 00f";
cxt.arc (200, 150, 5, 0, 2 * math.pi, true);
cxt.fill ();
cxt.closePath ();
cxt.beginPath ();
cxt.strokestyle = "# 00f";
cxt.arc (200, 150, 100, 0, 2 * math.pi, true);
cxt.stroke ();
cxt.closePath ();
cxt.beginPath ();
CXT.TRANSLATE (200, 150); // planter l'origine;
cxt.rotate (-math.pi / 2);
cxt.save ();
pour (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);
} autre {
// 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;
Fonction 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);
</cript>
<div> </div>
</docy>
</html>