Kommentar: Heute werde ich über das Zeichnen von Kurven mit quadratischer Curveto -Methode sprechen. Quadratischer Mittel bedeutet quadratisch, dh die quadratische Gleichung in der Mathematik. Als nächstes werden wir die Verwendung der quadratischen Methode im Detail einführen. Interessierte Freunde können darüber lernen.
Lassen Sie uns weiterhin über die Methode zum Zeichnen von Kurven in Leinwand sprechen. Heute werde ich über quadratische Curveto sprechen.Um ehrlich zu sein, ist diese Methode etwas beängstigend, Sie können sie zunächst aus dem Namen der Funktion erleben. Ich denke, es ist notwendig, diesen Funktionsnamen zu verkürzen.
Quadratische bedeutet quadratisch, dh die quadratische quadratische Gleichung in der Mathematik. Die Parameter von ctx.quadraticcurveto sind wie folgt:
ctx.quadraticcurveto (x1, y1, x, y);
Wo sind x und y die Koordinaten des Endpunkts und X1 und Y1 sind die Koordinaten des Kurvenregelungspunkts? Was? Sie fragen mich, wo der Ausgangspunkt ist? Der Ausgangspunkt wird vorher mit Moveto bestimmt.
Der Grund, warum ich die Koordinaten des Kontrollpunkts mit der Seriennummer 1 einsetze, liegt darin, dass die Funktion der später genannten Zeichnungskurven zwei Kontrollpunkte aufweist, die x2 und y2 sind. Daher werde ich hier zuerst eine Impfung geben.
Der durch Moveto und der Endpunkt bestimmte Startpunkt, der durch quadratische Curveto selbst bestimmt wird, kann in eine gerade Linie verbunden werden. Da quadratische Curveto nur einen Kontrollpunkt hat, befindet sich dieser Steuerpunkt entweder auf der linken Seite der Linie oder auf der rechten Seite der Linie, sodass quadratische Curveto nur Bögen zeichnen kann, aber dennoch keine S-förmige Linie zeichnen kann.
Aus Gründen des einfachen Verständnisses werde ich im vorherigen Artikel weiterhin die Methode zum Zeichnen von Hilfslinien verwenden. Der vorläufige Code lautet wie folgt:
var x1 = 350,
y1 = 250,
x = 400,
y = 500;
ctx.beginPath ();
ctx.strokestyle = "#000";
ctx.moveto (300.300); // Startpunkt
ctx.quadraticcurveto (x1, y1, x, y); // echte Kurve
ctx.stroke ();
ctx.beginPath ();
ctx.strokestyle = "RGBA (255,0,0,0,5)";
ctx.moveto (300.300);
ctx.lineto (x1, y1); // Diese Zeile und die nächste Zeile sind die Zeilen, die den Steuerpunkt zeichnen
ctx.lineto (x, y);
ctx.moveto (300.300); // Die Anfangs- und Endpunkte der Kurvenstart- und Endpunkte
ctx.lineto (x, y);
ctx.stroke ();
Hier habe ich zwei Hilfslinien gezogen, eine ist die Verbindungslinie zwischen dem Startpunkt und dem Endpunkt, und der andere ist die Hilfslinie zwischen dem Startpunkt und dem Kontrollpunkt und dann bis zum Endpunkt (eigentlich zwei). Der Schnittpunkt dieser beiden Linien ist die Kontrollpunktkoordinate von quadratisch -curveto.
Quadratische Curveto kann nur Kurven in Bögen zeichnen, aber dieser Bogen kann sehr unregelmäßig sein, was auch eine Verbesserung im Vergleich zu ARC und ARCTO ist.
Zusätzlich hat quadratische Curveto keine Umkehrung wie Arcto.
Wenn Sie den Kontrollpunkt sehr weit ziehen, kann die Grafik für Sie natürlich nicht wiederzuerkennen. Versuchen wir es:
y1 = 950;
Ich habe Y1 gerade etwas größer geändert, und die Kurve ging über den Reichweite der Leinwand hinaus.
Der von quadratischen Curveto gezogene Kurvenbereich kann jedoch die Koordinaten des Kontrollpunkts niemals erreichen oder überschreiten. Wir müssen den Kontrollpunkt nur gut steuern, damit wir uns keine Sorgen machen müssen.
Ich schrieb eine einfache Seite mit sich bewegenden Beispiele, in denen der Prozess des Zeichnens von Kurven in quadratisch -curveto zeichnet, in der Hoffnung, Ihnen zu helfen, Ihr Verständnis zu vertiefen:
Bitte seien Sie integrativer, wenn der Code hässlich geschrieben ist.