Vorläufige Studiennotizen zu Html5 Canvas (10) – Komplexer Pfad

Ich habe bereits einfache Zeichenpfade vorgestellt. Zunächst werden Polylinien vorgestellt. Der Effekt ist wie folgt:

Der Code lautet wie folgt:

context.beginPath();
context.moveTo(100,50);
//context.lineTo(100,50);
context.lineTo(150,150);
context.lineTo(50,150);
//context.closePath();
context.stroke();

Auf moveTo folgten die horizontalen und vertikalen Koordinaten des Startpunkts. Ich habe es versucht und das erste ist lineTo. Das folgende lineTo besteht darin, eine gerade Linie von diesem Punkt aus zu zeichnen zum nächsten Punkt und verwenden Sie dann diesen Punkt als Ausgangspunkt. Die Anpassung von lineTo erfolgt vom vorherigen Punkt bis zu diesem Punkt. Wenn context.closePath(). ; ist eingeschaltet, dann wird der aktuelle Punkt mit dem frühesten Startpunkt verbunden, um ein geschlossenes Dreieck zu bilden. Der Effekt ist wie folgt:

Siehe unten Bezier-Kurve: Es gibt zwei Methoden zum Implementieren der Bezier-Kurve: quadraticCurveTo und bezierCurveTo , das sind quadratische Bezier-Kurven und Der Unterschied zwischen der kubischen Bezier-Kurve und der kubischen Bezier-Kurve besteht darin, dass die quadratische Bezier-Kurve nur eine Spitze hat, während die kubische Bezier-Kurve sowohl Spitzen als auch Täler hat Schauen Sie sich die quadratische Bezier-Kurve an. Der Effekt ist wie folgt:

Der Code lautet wie folgt:

context.beginPath();
context.moveTo(50,250);
//context.lineTo(50,250);
context.quadraticCurveTo(150,100,250,250);
//context.closePath();
context.stroke();

Der erste ist der Startpunkt, oder er kann moveTo oder lineTo, dann rufen Sie quadraticCurveTo auf. Die ersten beiden Parameter sind die Koordinaten des Kontrollpunkts. Die letzten beiden Parameter sind die horizontalen und vertikalen Koordinaten des Endpunkts Der Punkt ist derselbe wie die horizontale Koordinate des „Wellengipfels“. Die vertikale Koordinate des Wellengipfels hängt mit der vertikalen Koordinate des Wellengipfels zusammen, dh je größer die vertikale Koordinate, desto höher der Wellengipfel. Wenn Sie context.closePath();

öffnen, ist der Effekt wie folgt:

Schauen wir uns zunächst die kubische Bezier-Kurve an:

Der Code lautet wie folgt:

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
//context.closePath();
context.stroke();

bezierCurveTo

Die drei Parameter sind jeweils die horizontalen und vertikalen Koordinaten des ersten oder Wellenbergs oder -tals, der Horizontalen und vertikale Koordinaten des zweiten Wellengipfels oder -tals sowie die horizontalen und vertikalen Koordinaten des Endpunkts. Öffnen Sie auch context.closePath();, um die Kurve ebenfalls zu schließen Der Effekt ist wie folgt:

Das Obige ist der Inhalt der Vorstudie zu Html5 Canvas Hinweise (10) – Komplexe Pfade. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!