HTML Canvas 直线

实例

// Δημιουργία καναβιού:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Ορίζει μια νέα διαδρομή:
ctx.beginPath();
// Ορίζει το ξεκίνημα:
ctx.moveTo(0, 0);
// Ορίζει το τέλος:
ctx.lineTo(200, 100);
// Σχεδιασμός:
ctx.stroke();

亲自试一试

Σχεδιασμός γραμμής Canvas

Η γραμμή σχεδιάζεται χρησιμοποιώντας τη διαδρομή στο canvas:

Μέθοδος

Η μέθοδος beginPath() ξεκινά μια νέα διαδρομή. Δεν σχεδιάζει τίποτα, αλλά μόνο ορίζει μια νέα διαδρομή.

Η μέθοδος moveTo() ορίζει το ξεκίνημα της γραμμής. Δεν σχεδιάζει τίποτα, αλλά μόνο ορίζει ένα ξεκίνημα.

Η μέθοδος lineTo() καθορίζει το τέλος της γραμμής. Δεν σχεδιάζει τίποτα, αλλά μόνο ορίζει ένα τέλος.

Η μέθοδος stroke() σχεδιάζει πραγματικά τη γραμμή. Η προεπιλεγμένη χρώση πινέλου είναι μαύρη.

Ιδιότητα lineWidth

Η ιδιότητα lineWidth καθορίζει το πλάτος της γραμμής που χρησιμοποιείται για το σχεδιασμό στο canvas.

Πρέπει να το ρυθμίσετε πριν από την κλήση του stroke() μέθοδου.

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

亲自试一试

Ιδιότητα strokeStyle

Η ιδιότητα strokeStyle καθορίζει το στυλ που χρησιμοποιείται για το σχεδιασμό στο canvas.

Πρέπει να το ρυθμίσετε πριν από την κλήση του stroke() μέθοδου.

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

亲自试一试

Ιδιότητα lineCap

Η ιδιότητα lineCap καθορίζει τον τύπο κορμού της γραμμής (butt, round ή square).

Η προεπιλεγμένη τιμή είναι square (κυκλική).

Πρέπει να το ρυθμίσετε πριν από την κλήση του stroke() μέθοδου.

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

亲自试一试

另请参阅：

CodeW3C.com 的完整 Canvas 参考手册