Wir haben bereits gelernt, wie man einige Linien in Canvas zeichnet, daher zeige ich Ihnen in diesem Artikel, wie Sie diese Linien miteinander verbinden, um viel lebendigere Zeichnungen zu erstellen.

1. Verbinden Sie mehrere Linien in Canvas miteinander

Wie wir in Canvas wissen, verwenden wir die Funktion beginPath() , um den Beginn des Zeichnens einer neuen Form zu deklarieren. Um also mehrere Linien miteinander zu verbinden, erklären wir es zuerst nur einmal als wahr und verlassen uns dann auf die Syntax jeder Linie, um die Zeichnungspunkte zu bestimmen.

Beispiel : Zeichne eine Figur wie diese

Wir analysieren diese Zahl zunächst wie folgt:

Wir werden also zwei Linien verwenden, eine quadratische und eine Benzier-Linie.

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(100, 20); // line 1 context.lineTo(200, 160); // quadratic curve context.quadraticCurveTo(230, 200, 250, 120); // bezier curve context.bezierCurveTo(290, -40, 300, 200, 400, 150); // line 2 context.lineTo(500, 90); context.lineWidth = 5; context.strokeStyle = 'blue'; context.stroke();

2. Line Join-Eigenschaft in Canvas

In Canvas gibt es eine lineJoin -Eigenschaft, die uns bei der Auswahl hilft, wie zwei Linien verbunden werden sollen ( Schnittpunkt ). Es gibt drei Möglichkeiten, wie folgt eine Verbindung herzustellen:

• Gehrung : einen spitzen Winkel machen
• rund : abgerundete Ecken
• Abschrägung : zu einer scharfen Ecke abgerundet, aber der obere Teil verloren

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // set line width for all lines context.lineWidth = 25; context.strokeStyle = 'blue'; // miter line join (left) context.beginPath(); context.moveTo(99, 150); context.lineTo(149, 50); context.lineTo(199, 150); context.lineJoin = 'miter'; context.stroke(); // round line join (middle) context.beginPath(); context.moveTo(239, 150); context.lineTo(289, 50); context.lineTo(339, 150); context.lineJoin = 'round'; context.stroke(); // bevel line join (right) context.beginPath(); context.moveTo(379, 150); context.lineTo(429, 50); context.lineTo(479, 150); context.lineJoin = 'bevel'; context.stroke();

3. ArcTo()-Funktion in Canvas

Die Funktion arcTo() wird verwendet, um einen Bogen in Canvas mit einem bestimmten Startpunkt zu erstellen, das heißt, sie wird verwendet, um eine bestimmte Linie zu verbinden ( natürlich hat diese Linie bereits einen Endpunkt und dieser Punkt ist auch der Punkt). von arcTo() ).

Syntax : context.arcTo(x1, y1, x2, y2, r);

Darin :

• x1 : x-Position des Kontrollpunkts
• y1 : y-Position des Kontrollpunkts
• x2 : x-Position des Endpunkts
• y2 : y-Position des Endpunkts
• r : Radius des Bogens ( Radius ).

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); // Vẽ 1 đường thẳng ctx.moveTo(20, 20); ctx.lineTo(100, 20); // Nôi tiếp là một đường cung ctx.arcTo(150, 20, 150, 70, 50); // Tiếp theo là một đường thẳng ctx.lineTo(150, 120); ctx.stroke(); <br><br><br><br><br><br><br><br><br><br><br><br><br>

4. Fazit

In dieser Lektion haben wir einige Möglichkeiten kennengelernt, Linien miteinander zu verbinden, um eine Vielzahl von Linien zu bilden. Wenn Sie diese Methoden kombinieren, werden Sie äußerst beeindruckende Zeichnungen erstellen. Allerdings ist die Arbeit mit Canvas wirklich schwierig, da die Koordinatenberechnung sehr langwierig und kompliziert ist.

In der nächsten Lektion lernen wir, wie man einige spezielle Formen zeichnet, die Shapes genannt werden. Zum Beispiel Kreis, Rechteck, Halbkreis.