Einfache Möglichkeit, Kurven mithilfe der Leinwand von HTML5 zu zeichnen

In diesem Artikel wird hauptsächlich die einfache Methode zur Verwendung von HTML5 -Leinwand zum Zeichnen von Kurven vorgestellt. Es ist das Grundwissen in der Einführung in HTML5. Freunde, die es brauchen, können sich darauf beziehen.

Canvas2ds eigene Kurvenmethode

Vor kurzem untersuche ich die Berechnung von 3D -Weichkörpern, also füge ich etwas Wissen hinzu. Es beinhaltet häufig eine numerische Analyse, hauptsächlich verschiedene Interpolationsalgorithmen für Kurven. Ich erinnerte mich plötzlich, dass Canvas2d selbst auch Kurven mit quadratischen und Würfelbazkurven zeichnen kann. Eigentlich habe ich diese Methode noch nicht verwendet, versuchen wir es jetzt ~

In diesem Artikel geht es nur um eine einfache Kurvenzeichnung. Lassen Sie uns also nicht über viele komplexe Prinzipien sprechen. Außerdem ist das Prinzip der Baz -Kurve selbst sehr einfach. Sie können es verstehen, indem Sie sich Wikipedia ansehen. In der Tat verwenden viele einfache Kurvenschaltwerkzeuge Baz -Kurven. Wenn Sie die Kurven in Windows 'eigenen Zeichenwerkzeugen verwendet haben, müssen Sie mit ihnen vertraut sein. Sie können zuerst eine gerade Linie herausziehen und dann auf eine bestimmte Position klicken, um die gerade Linie zu verdrehen. Die anfängliche Luftwiderstandsaktion bestimmt die beiden Scheitelpunkte der Kurve, und die Klickaktion fügt den Zwischenpunkt hinzu. Das mit Windows gelieferte Zeichenwerkzeug verwendet kubische Baz -Kurven und Sie können zwei Zwischenpunkte hinzufügen. Die Bate -Kurve unterscheidet sich von der allgemeinen Polynominterpolation. Sein Zwischenpunkt wird nur als Kontrollpunkt verwendet, nicht als der Scheitelpunkt, den die Kurve durchlaufen muss. Und es kann auch geschlossene Kurven machen. Canvas2d bietet zwei Methoden zum Zeichnen von Kurven

quadratische Curveto: Quadratische Baze -Kurve

Beziercurveto: Kubikkurve

Die Linie wird aus der aktuellen Position gezogen, und die aktuelle Position kann durch die Moveto -Methode angegeben werden. Mit der Anfangsposition der Kurve sind auch der Zwischenpunkt und die Endposition erforderlich. Übergeben Sie diese Positionskoordinaten einfach an die Zeichenfunktion. Beispielsweise erfordert eine quadratische Batez -Kurve einen Zwischenpunkt und eine Endposition, sodass zwei Koordinaten an die quadratische Funktionsfunktion übergeben werden müssen. Die Koordinaten bestehen aus X und Y, was bedeutet, dass diese Funktion 4 Parameter enthält. BezierCurveto ist der gleiche, außer dass es zwei Zwischenpunkte hat. Lassen Sie es uns jetzt verwenden