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