Introduction détaillée du composant HTML5 Canvas pour implémenter le code graphique et textuel de l'horloge électronique

Idée de base :

Dessinez d'abord un fond rectangulaire et définissez la couleur sur gris. Dessinez une simple bordure extérieure rectangulaire sur l'arrière-plan, puis dessinez

une bordure intérieure, puis chargez l'image sélectionnée comme image d'arrière-plan à l'intérieur de l'horloge électronique. Ensuite, commencez à dessiner l'échelle de l'horloge,

dessinez l'échelle des minutes, et enfin obtenez l'heure actuelle du système et dessinez trois poignées pour les heures, les minutes et les secondes.

Points techniques :

Utilisez le Canvas 2D de HTML5 pour dessiner des objets, principalement en utilisant les méthodes context.save() et context.restore() pour enregistrer

Dessinez l'état et réinitialisez l'état de dessin, utilisez les méthodes Transform et fillRect() pour dessiner l'horloge et l'échelle des minutes. Utilisez la méthode

drawImage() pour dessiner l'image d'arrière-plan et utilisez la méthode setTimeout() pour actualiser l'affichage de l'heure.

Explication détaillée du code :

Le code pour obtenir l'objet de dessin HTML5 Canvas est le suivant :

var canvas = document.getElementById("canvas1");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 500);

Le code pour dessiner l'échelle de l'horloge est le suivant :

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

Le code pour dessiner l'échelle des minutes et des minutes est le suivant :

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

Enregistrer Le code d'état de production est le suivant :

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

Le code d'état du dessin de récupération est le suivant :

ctx.restore();

L'effet de l'opération est le suivant :

Le code source complet du programme est comme suit :

<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

Défauts :

Il n'est pas bon d'actualiser et de charger l'objet image à chaque fois que je l'ai testé dans le navigateur Google. Il est recommandé d'exécuter le code ci-dessus dans le

navigateur Google.

Ce qui précède est l'introduction détaillée du code graphique et textuel du composant HTML5 Canvas pour implémenter l'horloge électronique. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !