Détails du code graphique et textuel pour dessiner des motifs de Tai Chi à l'aide du composant HTML5 Canvas

Idée d'implémentation :

Le principe d'implémentation est principalement d'utiliser la fonction path fournie par le composant Canvas de HTML5 pour dessiner d'abord les deux

.

Deux demi-cercles, respectivement noir et blanc, forment un cercle. Une fois le dessin terminé, dessinez respectivement un cercle noir

À l'intérieur du cercle noir et blanc dessiné, le rayon est exactement la moitié de. le grand cercle noir et blanc. Enfin, remplissez les deux

petits cercles noir et blanc dessinés respectivement avec des points blancs et noirs, d'un rayon d'environ 10 pixels.

Les effets du deuxième programme sont les suivants :

Trois analyses clés du programme :

Un programme pour dessiner un demi-cercle, où 200 et 200 représentent les coordonnées du point central pour commencer à dessiner, et le troisième paramètre 150 représente le rayon du cercle à être dessiné

Le quatrième paramètre représente l'angle de départ, le cinquième paramètre indique l'angle final et le dernier paramètre indique s'il est dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre

Le code pour dessiner un demi-cercle blanc est le suivant suit :

		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill();

Le code pour dessiner un demi-cercle noir est le suivant :

		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();

Le code pour ajouter du texte dans le Le motif Tai Chi utilise le traitement de transparence. La fonction de réglage global de la transparence du Canvas

est la suivante :

		// set transparency value  
		ctx.globalAlpha = 0.2;

Le code pour dessiner du texte est le suivant :

		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250);

Le code JavaScript complet du programme est le suivant :

	window.onload = function() {
		var cvs = document.getElementById("canvas-path");
		ctx = cvs.getContext("2d");

		// Create circle, radius = 150
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
		ctx.closePath();
		ctx.fill();
		
		// draw sub circle
		// start point(x, y), radius, start angle, end angle, boolean antiClockWise
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 275, 75, 0, Math.PI*2, false); 
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 125, 75, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// fill black and white point
		ctx.fillStyle="#fff";
		ctx.beginPath(); 
		ctx.arc(200, 275, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle="#000";
		ctx.beginPath(); 
		ctx.arc(200, 125, 10, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
		
		// set transparency value  
		ctx.globalAlpha = 0.2;  
		  
		// Draw semi transparent text
		ctx.fillStyle = "#f00";
		ctx.font = "32pt Arial";
		ctx.fillText("Hello", 220, 200);
		ctx.fillText("Canvas", 100, 250);
		ctx.globalAlpha = 1.0; 
		ctx.shadowOffsetX = 2;  
		ctx.shadowOffsetY = 2;  
		ctx.shadowBlur = 2;  
		ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  
		ctx.fillStyle = "#000";
		ctx.font = "20px Times New Roman";
		ctx.fillText("-created by gloomyfish", 100, 30);
	};

Pourquoi devrais-je m'ajouter sur le nom de l'illustration, car j'ai constaté que l'article n'était pas marqué lors de sa réimpression ? !

Ce qui précède contient les détails du code graphique du composant HTML5 Canvas pour dessiner des modèles de Tai Chi. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !