Detaillierte Einführung in den grafischen Code einer elektronischen Uhr mithilfe der HTML5-Komponente Canvas-H5-Tutorial-php.cn

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

黄舟

Freigeben： 2017-03-03 16:24:22

Original

1506 Leute haben es durchsucht

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

Nach dem Login kopieren

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);  	
		    }

Nach dem Login kopieren

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); 	
		    }

Nach dem Login kopieren

Speichern Der Produktionsstatuscode lautet wie folgt:

ctx.translate(245, 245);
ctx.save();

Nach dem Login kopieren

Der Statuscode der Wiederherstellungszeichnung lautet wie folgt:

ctx.restore();

Nach dem Login kopieren

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>

Nach dem Login kopieren

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 (m.sbmmt.com)!