Details zum Grafikcode zum Zeichnen von Tai-Chi-Mustern mithilfe der HTML5-Canvas-Komponente

Implementierungsidee:

Das Implementierungsprinzip besteht hauptsächlich darin, die von der Canvas-Komponente von HTML5 bereitgestellte Pfadfunktion zu verwenden, um zunächst einen Kreis zu zeichnen

Zwei Halbkreise, jeweils schwarz und weiß, bilden einen Kreis. Zeichnen Sie nach Abschluss der Zeichnung einen schwarzen

innerhalb des gezeichneten schwarzen und weißen Kreises, dessen Radius genau die Hälfte beträgt der große schwarz-weiße Kreis. Füllen Sie abschließend die beiden gezeichneten

kleinen schwarzen und weißen Kreise mit weißen bzw. schwarzen Punkten mit einem Radius von etwa 10 Pixeln.

Die Auswirkungen des zweiten Programms sind wie folgt:

Drei Schlüsselprogrammanalysen:

Ein Programm zum Zeichnen eines Halbkreises, wobei 200 und 200 die Koordinaten des Mittelpunkts darstellen, um mit dem Zeichnen zu beginnen, und der dritte Parameter 150 den Radius des Kreises darstellt gezeichnet werden

Der vierte Parameter stellt den Startwinkel dar, der fünfte Parameter gibt den Endwinkel an und der letzte Parameter gibt an, ob er im Uhrzeigersinn oder gegen den Uhrzeigersinn verläuft

Der Code zum Zeichnen eines weißen Halbkreises lautet wie folgt folgt:

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

Der Code zum Zeichnen eines schwarzen Halbkreises lautet wie folgt:

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

Der Code zum Hinzufügen von Text im Das Tai-Chi-Muster verwendet die Transparenzverarbeitung. Die globale Transparenzeinstellungsfunktion

lautet wie folgt:

		// set transparency value  
		ctx.globalAlpha = 0.2;

Der Code zum Zeichnen von Text lautet wie folgt:

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

Der vollständige JavaScript-Code des Programms lautet wie folgt:

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

Warum sollte ich mich zum Namen hinzufügen, weil ich festgestellt habe, dass der Artikel beim Nachdruck nicht markiert war? !

Das Obige zeigt die Details des Grafikcodes der HTML5-Canvas-Komponente zum Zeichnen von Tai-Chi-Mustern. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).