Grundidee:
Zeichnen Sie zunächst einen rechteckigen Hintergrund und stellen Sie die Farbe auf Grau ein. Zeichnen Sie einen einfachen rechteckigen Außenrand auf den Hintergrund,
dann einen Innenrand und laden Sie dann das ausgewählte Bild als Hintergrundbild in die elektronische Uhr. Beginnen Sie dann mit dem Zeichnen der Uhrskala,
zeichnen Sie die Minutenskala und ermitteln Sie schließlich die aktuelle Systemzeit und zeichnen Sie drei Ziehpunkte für Stunden, Minuten und Sekunden.
Technische Punkte:
Verwenden Sie Canvas 2D von HTML5 zum Zeichnen von Objekten, wobei Sie zum Speichern hauptsächlich die Methoden context.save() und context.restore() verwenden
Zeichnen Sie den Status und setzen Sie den Zeichenstatus zurück. Verwenden Sie die Methoden Transform und fillRect(), um die Uhr- und Minutenskala zu zeichnen. Verwenden Sie die Methode
drawImage(), um das Hintergrundbild zu zeichnen, und verwenden Sie die Methode setTimeout(), um die Zeitanzeige zu aktualisieren.
Detaillierte Codeerklärung:
Der Code zum Abrufen des HTML5-Canvas-Zeichenobjekts lautet wie folgt:
var canvas = document.getElementById("canvas1"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500);
Der Code zum Zeichnen der Uhrskala lautet wie folgt:
var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(245, 245); for (var i=0; i <= 12; i++) { // top ctx.fillRect(160,-7.5,30,10); ctx.strokeRect(160,-7.5,30,10); ctx.transform(cos, sin, -sin, cos, 0, 0); }
Der Code zum Zeichnen der Minute und Minutenskala lautet wie folgt:
var sin = Math.sin(Math.PI/30); var cos = Math.cos(Math.PI/30); for (var i=0; i <= 60; i++) { ctx.fillRect(170,-5,10,2); ctx.transform(cos, sin, -sin, cos, 0, 0); }
Speichern Der Produktionsstatuscode lautet wie folgt:
ctx.translate(245, 245); ctx.save();
Der Statuscode der Wiederherstellungszeichnung lautet wie folgt:
ctx.restore();
Der Betriebseffekt ist wie folgt:
Der vollständige Quellcode des Programms ist wie folgt:
<script> window.onload = function() { clockHand(); }; function clockHand() { var canvas = document.getElementById("canvas1"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500); // create background rectangle // ctx.lineWidth = 10; ctx.fillStyle = "gray"; ctx.fillRect(0,0,500,500); // draw frame ctx.lineWidth = 10; ctx.strokeStyle = "green"; ctx.strokeRect(0,0,500,500); // draw author infomation ctx.fillStyle = "blue"; ctx.font = "20px Times New Roman"; ctx.fillText("-created by gloomyfish", 150, 30); // draw inner rectangle ctx.lineWidth = 10; ctx.strokeStyle = "black"; ctx.strokeRect(45,45,400,400); // create background image var img=new Image(); img.src="background.png"; img.onload = function() { ctx.drawImage(img,45,45,400,400); ctx.save(); // draw marker unit ctx.lineWidth = 2; ctx.fillStyle = "purple"; ctx.strokeStyle = "black"; var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(245, 245); for (var i=0; i <= 12; i++) { // top ctx.fillRect(160,-7.5,30,10); ctx.strokeRect(160,-7.5,30,10); ctx.transform(cos, sin, -sin, cos, 0, 0); } // transform back center point // ctx.translate(245, 245); var sin = Math.sin(Math.PI/30); var cos = Math.cos(Math.PI/30); for (var i=0; i <= 60; i++) { ctx.fillRect(170,-5,10,2); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.restore(); // top ctx.fillText("12", 233,100); // bottom ctx.fillText("6", 240,400); // left ctx.fillText("9", 90,252); // right ctx.fillText("3", 395,250); // get time ctx.save(); ctx.translate(245, 245); ctx.save(); // dynamic show time var now=new Date(); var hrs=now.getHours(); var min=now.getMinutes(); var sec=now.getSeconds(); //Draw hour hand ctx.rotate(Math.PI/6*(hrs+(min/60)+(sec/3600))); ctx.beginPath(); ctx.moveTo(0,10); ctx.lineTo(0,-60); ctx.stroke(); ctx.restore(); ctx.save(); //Draw minute hand ctx.rotate(Math.PI/30*(min+(sec/60))); ctx.beginPath(); ctx.moveTo(0,20); ctx.lineTo(0,-110); ctx.stroke(); ctx.restore(); ctx.save(); //Draw second hand ctx.rotate(Math.PI/30*sec); ctx.strokeStyle="#E33"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0,20); ctx.lineTo(0,-110); ctx.stroke(); ctx.restore(); // finally store to originall point ctx.restore(); setTimeout(clockHand,1000); }; } </script>
Fehler:
Das Aktualisieren und Laden des Bildobjekts ist nicht sehr gut. Ich habe es im Google-Browser getestet Es wird empfohlen, den obigen Code im
Google-Browser auszuführen.
Das Obige ist die detaillierte Einführung des Grafik- und Textcodes der HTML5-Komponente Canvas zur Implementierung der elektronischen Uhr. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!