Zusätzlich zum Zeichnen von geraden Linien kann Canvas auch Kurven wie Bögen, quadratische Kurven und Benzier-Kurven zeichnen. Um eine gerade Linie zu zeichnen, müssen wir nur den Anfangs- und den Endpunkt bestimmen, aber bei Kurven gibt es vor dem Zeichnen einige Probleme zu berechnen.

1. Zeichnen Sie im Canvas-Bereich einen Bogen

Um einen Bogen zu zeichnen, verwenden wir die arc(x, y, radius, startAngle, endAngle, counterClockwise) , wobei:

• x und y sind die Mittelpunkte des Bogens
• radius ist der Radius
• startAngle ist der Startwinkel
• endAngle ist der Endwinkel
• counterClockwise Uhrzeigersinn ist die Zeichenrichtung ( im Uhrzeigersinn oder gegen den Uhrzeigersinn )

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Xác đinh tâm là trọng tâm của Canvas var x = canvas.width / 2; var y = canvas.height / 2; // bán kính 75px var radius = 75; // Góc bắt đầu là 1.1PI var startAngle = 1.1 * Math.PI; // Góc kết thúc là 1.9PI var endAngle = 1.9 * Math.PI; // Cùng chiều kim đồng hồ var counterClockwise = false; // Vẽ đường cung context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = 15; // line color context.strokeStyle = 'black'; context.stroke();

2. Zeichnen Sie eine quadratische Kurve im Canvas-Bereich

Um eine quadratische Kurve in Canvas zu zeichnen, verwenden wir die Methode quadraticCurveTo() , die quadratische Kurve wird durch drei Hauptpunkte bestimmt, darunter:

• Der Ausgangspunkt ( Kontextpunkt ).
• Kontrollpunkt ( Kontrollpunkt ).
• Endpunkt ( Endpunkt ).

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(20, 20); // Điểm bắt đầu vẽ context.quadraticCurveTo(20, 100, 200, 20); //vẽ qua các điểm context.lineWidth = 1; // line color context.strokeStyle = 'black'; context.stroke();

• Der Ausgangspunkt ist ( 20, 20 ) in der Funktion context.moveTo( 20, 20 ) .
• Der Kontrollpunkt ist ( 20, 100 ) in der Funktion context.quadraticCurveTo( 20, 100 , 200, 20) .
• Der Endpunkt ist ( 200, 20 ) in der context.quadraticCurveTo(20, 100, 200, 20 ) .

Die Scheitelpunktposition der Kurve wird durch die Linie bestimmt, die die Mittelpunkte zwischen den beiden Linien ( Kontextpunkt, Kontrollpunkt ) und ( Endpunkt, Kontrollpunkt ) verbindet.

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(188, 150); context.quadraticCurveTo(288, 0, 388, 150); context.lineWidth = 10; // line color context.strokeStyle = 'black'; context.stroke();

3. Zeichnen Sie eine Benzier-Kurve im Canvas-Bereich

Die Benzier-Kurve wird durch vier Punkte definiert:

• Der Ausgangspunkt ( Kontextpunkt )
• Kontrollpunkt eins ( Kontrollpunkt 1 )
• Kontrollpunkt zwei ( Kontrollpunkt 2 )
• Endpunkt

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); ctx.stroke();

Die Erklärung im Code lautet wie folgt:

• Der Ausgangspunkt ist ( 20, 20 ) in der Funktion context.moveTo( 20, 20 ) .
• Kontrollpunkt 1 ist ( 20, 100 ) in der Funktion context.quadraticCurveTo( 20, 100 , 200, 100, 200, 20) .
• Kontrollpunkt 2 ist ( 200, 100 ) in der Funktion context.quadraticCurveTo(20, 100, 200, 100 , 200, 20) .
• Der Endpunkt ist ( 200, 20 ) in der context.quadraticCurveTo(20, 100, 200, 100, 200, 20 ) .

Die Frage ist, wie man den Scheitelpunkt und die Krümmung bestimmt. Siehe das Beispiel unten.

 var canvas = document.getElementById('myCanvas');<br /> var context = canvas.getContext('2d');<br /> <br /> context.beginPath();<br /> context.moveTo(188, 130);<br /> context.bezierCurveTo(140, 10, 388, 10, 388, 170);<br /> context.lineWidth = 10;<br /> <br /> // line color<br /> context.strokeStyle = 'black';<br /> context.stroke();

4. Fazit

Es fällt mir schon jetzt schwer, mit Canvas zu arbeiten. Wirklich, um gute Bilder zu zeichnen, müssen Sie jedes Standardpixel berechnen, ganz zu schweigen davon, dass Sie mathematische Kenntnisse verwenden müssen, um Koordinaten zu bestimmen.

In der nächsten Lektion lernen wir, wie man mit den in dieser und früheren Lektionen erlernten Funktionen eine Linie zeichnet.