In diesem Tutorial lernen wir, wie man eine Linie in Canvas zeichnet.

1. Zeichnen Sie Linien auf der Leinwand

Eine gerade Linie hat die folgenden Eigenschaften:

• Startposition, Endposition.
• Breite der Linie.
• Farbe der Linie
• Formatieren Sie die beiden Enden der Linie.

Zeichnen Sie eine gerade Linie:

Um eine Linie zu zeichnen, müssen wir die Startposition und die Endposition definieren, jede Position wird durch den Abstand vom linken Rand und den Abstand vom oberen Rand ( trái, trên ) bestimmt.

 <canvas id="myCanvas" width="400" height="200"></canvas> <script> // Lấy đối tượng Canvas var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ 2D var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(490, 190); // Điểm kết thúc context.stroke(); // Tiến hành vẽ </script>

Darin haben wir :

• Verwenden Sie die Funktion beginPath() , um eine neue Zeile zu deklarieren
• Verwenden Sie die moveTo(position) -Funktion, um den Startpunkt anzugeben.
• Verwenden Sie lineTo(position) , um den Endpunkt anzugeben
• Verwenden Sie die Funktion stroke() , um mit dem Zeichnen fortzufahren.

Strichstärke und Farbe:

Um die Breite der Linie auszuwählen, verwenden wir die Eigenschaft lineWidth , um die Farbe auszuwählen, verwenden wir die Eigenschaft strokeStyle .

 // Lấy đối tượng Canvas var canvas = document.getElementById('myCanvas'); // Chọn đối tượng vẽ 2D var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(380, 180); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.stroke(); // Tiến hành vẽ

Ergebnis:

Formatieren Sie die beiden Enden der Linie:

Formatieren Sie die beiden Enden einer geraden Linie, die auch als Linienende bezeichnet wird.

Um die Zeilenkappe zu formatieren, verwenden wir die lineCap Eigenschaft und sie hat einen der folgenden drei Werte:

• Hintern : an der Spitze senkrecht, hat normale Abmessung
• rund : abgerundet, länger als üblich, da die beiden Enden ein abgerundetes Segment hinzufügen.
• quadratisch : rechteckiges Brett, länger als üblich durch die beiden zusätzlichen Enden des rechteckigen Segments.

 /*CANVAS THỨ NHẤT*/ var canvas = document.getElementById('myCanvas1'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.lineCap = 'butt'; context.stroke(); // Tiến hành vẽ /*CANVAS THỨ HAI*/ var canvas = document.getElementById('myCanvas2'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'pink';// Màu hồng context.lineCap = 'round'; context.stroke(); // Tiến hành vẽ /*CANVAS THỨ BA*/ var canvas = document.getElementById('myCanvas3'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(190, 10); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'red';// Màu đỏ context.lineCap = 'square'; context.stroke(); // Tiến hành vẽ

2. Zeichnen Sie aufeinanderfolgende Linien in Canvas

Die obigen Beispiele hören nur beim Zeichnen einer Linie auf, aber Sie können mit der Funktion lineTo() mehrere Linien hintereinander zeichnen.

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // Tiến hành vẽ context.beginPath(); // Khai báo vẽ đường thẳng mới context.moveTo(10, 10); // Điểm bắt đầu context.lineTo(390, 10); // Điểm giữa context.lineTo(20, 190); // Điểm giữa context.lineTo(390, 190); // Điểm kết thúc context.lineWidth = 15; // rộng 15px context.strokeStyle = 'blue';// Màu xanh context.lineCap = 'butt'; context.stroke(); // Tiến hành vẽ

2. Fazit

Um also eine Linie zu zeichnen, müssen wir zwei Punkte an den beiden Enden der Linie definieren, jede Linie hat einige zusätzliche Eigenschaften wie die Breite der Linie, die Farbe der Linie und das Format der beiden Enden der Linie.

Diese Lektion endet hier, in der nächsten lernen wir, wie man Kurven zeichnet.