Anwendungsbeispiele für das Zeichnen von Leinwandpfaden und die Koordinatentransformation von HTML5_HTML5-Tutorialfähigkeiten-H5-Tutorial-php.cn

Anwendungsbeispiele für das Zeichnen von Leinwandpfaden und die Koordinatentransformation von HTML5_HTML5-Tutorialfähigkeiten

WBOY

Freigeben： 2016-05-16 15:50:42

Original

1770 Leute haben es durchsucht

Im vorherigen Artikel haben wir etwas über Canvas von HTML5 gelernt. In diesem Artikel versuchen wir natürlich, eine HTML5-Uhranwendung zu schreiben. Hier richten wir hauptsächlich die Übersetzung (translate) und Rotationstransformation (ratate) der Koordinatentransformation sowie die Pfadzeichnung von HTML5 Canvas, beginPath, closePath, rect, arc usw. sowie das Speichern und Wiederherstellen wichtiger ein Zeichnungsstatus des HTML5-Canvas-Pfadzeichnens. Mechanismus, Speichern, Wiederherstellen.
Viel mehr werde ich nicht sagen, gehe einfach direkt zum Code. Wenn du Fragen hast, kannst du mir gerne Fragen stellen und mir Anregungen und Ratschläge geben.
ff-Renderings:

Code:

Code kopieren

Der Code lautet wie folgt:

🎜 >

var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var hlen = 60;
var hlen = 40;
cxt.strokeRect(0, 0, c.width, c.height);
cxt.beginPath();
cxt.fillStyle = "#00f";
cxt.arc(200, 150, 5, 0, 2 * Math.PI, true);
cxt.closePath(); cxt.beginPath();
cxt.Stroke( ) ;
cxt.closePath();
cxt.translate(200, 150); //Übersetze den Ursprung;
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) ;
} else {
// cxt.strokeStyle = "#00f";
cxt.fillRect(90, 0, 10, 2); "div1").innerText = " " i;
cxt.rotate(Math.PI / 30);
cxt.closePath(); lh = 0;
function Refresh() {
cxt.save();
cxt.rotate(ls * Math.PI / 30); .clearRect(5, -1, slen 1, 2 2);
cxt.save();
cxt.rotate(lm * Math.PI / 30); .clearRect(5, -1, mlen 1, 3 2);
cxt.save();
cxt.rotate(lh * Math.PI / 6); .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.save();
cxt.rotate(s * Math.PI / 30 );
cxt.fillRect(5, 0, slen, 2);
cxt.save(); 🎜>cxt.fillRect(5, 0, mlen, 3);
cxt.save();
cxt.rotate(h * Math.PI / 6); .fillRect(5, -2, hlen, 4);
}
var MyInterval = setInterval("Refresh();, 1000);
="div1" style="background:#00f;">