Beispiele für html5

Autor：Eve Cole Aktualisierungszeit：2025-05-11 16:16:01

Kommentar: Dieser Artikel schreibt eine HTML5 -Uhr -Anwendung, um zu versuchen, die Übersetzungs- und Rotationstransformation der Koordinatentransformation sowie die Pfadzeichnung von HTML5 -Leinwand, BeginnPath, Conepath, REC, ARC usw. festzulegen. Sie können den Code direkt hochladen und darauf verweisen.

Im vorherigen Artikel haben wir etwas über Leinwand von HTML5 erfahren. Unnötig zu erwähnen, dass wir versuchen können, eine HTML5 -Uhr -Anwendung zu schreiben. Hier setzen wir hauptsächlich die Übersetzungs- und Rotationstransformation der Koordinatentransformation sowie die Pfadzeichnung von HTML5 -Leinwand, BeginnPath, Conepath, REC, ARC usw. und die wichtigen Mechanismen Rettungs- und Wiederherstellungsmechanismen des Zeichnungszustands von HTML5 -Leinwand, retten, wiederherstellen.

Ich werde nicht viel sagen, lade einfach den Code hoch. Wenn Sie Fragen haben, stellen Sie bitte Fragen und geben Sie mir Ratschläge.

Die Renderings unten:

Code:

<html>

<kopf>

</head>

<body>

<Canvas> Ihr Browser unterstützt es nicht </canvas>

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, 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); // den Ursprung pflanzen;

cxt.rotate (-math.pi / 2);

cxt.save ();

für (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);

} anders {

// 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;

Funktion 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>

</body>

</html>