Detaillierte Einführung in den grafischen Code einer elektronischen Uhr mithilfe der HTML5-Komponente Canvas

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 &lt;= 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 &lt;= 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>


	electronic clock

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)!