Verwenden von Pfaden zum Zeichnen von Bezier-Kurven zweiter und dritter Ordnung in HTML5 Canvas_html5-Tutorial-Techniken

In HTML5 Canvas können Sie die folgenden Methoden verwenden, um Bezier-Kurven dritter und zweiter Ordnung zu zeichnen:

Code kopieren

Der Code lautet wie folgt:

context.bezierCurveTo(cp1x, cp1y, cp2x , cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)

Eine Bezier-Kurve ist eine Kurve, die auf einer zweidimensionalen Ebene durch einen „Startpunkt“, einen „Endpunkt“ und einen oder mehrere „Kontrollpunkte“ definiert wird. Gewöhnliche Bezier-Kurven dritter Ordnung verwenden zwei Kontrollpunkte, während Kurven zweiter Ordnung nur einen Kontrollpunkt verwenden.

Um eine Bezier-Kurve zweiter Ordnung zu zeichnen, legen Sie einfach die Koordinaten des Endpunkts und die Koordinaten des Kontrollpunkts fest:

Code kopieren

Der Code lautet wie folgt:

context.moveTo(0, 0);
context.quadraticCurveTo(100,25,0,50);

Die Ergebnisse der Codeausführung sind wie folgt:

Die Kurve im obigen Beispiel beginnt bei den Koordinaten (0,0) und endet bei (0,50), und die Koordinaten des Kontrollpunkts, der zur Steuerung der Kurvenzeichnung verwendet wird, sind (100,25).

Im Vergleich zu Kurven zweiter Ordnung ist das Zeichnen von Bezier-Kurven dritter Ordnung flexibler, da zwei Kontrollpunkte festgelegt werden können. Der folgende Code zeichnet eine „S“-förmige Kurve:

Kopieren Sie den Code

Der Code lautet wie folgt:

context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

Übersetzungshinweis 1: Bezüglich Bezier-Kurven können Sie auf den Eintrag auf Wikipedia verweisen (http://en.wikipedia.org/wiki/Bézier_curve). Die darin enthaltene Animation erklärt den Generierungsmechanismus von Bezier-Kurven gut.

Anmerkung 2: Derzeit unterstützt HTML5 Canvas nur Bezier-Kurven bis zur dritten Ordnung, und Kurven über der vierten Ordnung werden noch nicht unterstützt.