Đường thẳng HTML Canvas

thực thể

// Tạo canvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Định nghĩa một đường dẫn mới:
ctx.beginPath();
// Định nghĩa điểm đầu:
ctx.moveTo(0, 0);
// Định nghĩa điểm cuối:
ctx.lineTo(200, 100);
// Vẽ:
ctx.stroke();

Thử ngay

Vẽ đường canvas

Vẽ đường sử dụng đường dẫn trong canvas:

phương pháp

Phương thức beginPath() bắt đầu một đường mới. Nó không vẽ bất cứ điều gì, chỉ định một đường mới.

Phương thức moveTo() xác định điểm đầu của đường. Nó không vẽ bất cứ điều gì, chỉ thiết lập một điểm đầu.

Phương thức lineTo() xác định điểm cuối của đường. Nó không vẽ bất cứ điều gì, chỉ thiết lập một điểm cuối.

Phương thức stroke() thực sự vẽ đường. Màu mặc định của bút chì là đen.

Thuộc tính lineWidth

Thuộc tính lineWidth xác định độ rộng của đường được sử dụng để vẽ trên canvas.

Phải thiết lập nó trước khi gọi phương thức stroke().

thực thể

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

Thử ngay

Thuộc tính strokeStyle

Thuộc tính strokeStyle xác định phong cách được sử dụng để vẽ trên canvas.

Phải thiết lập nó trước khi gọi phương thức stroke().

thực thể

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

Thử ngay

Thuộc tính lineCap

Thuộc tính lineCap xác định kiểu đầu của đường (butt, round hoặc square).

Mặc định là square (hình vuông).

Phải thiết lập nó trước khi gọi phương thức stroke().

thực thể

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

Thử ngay

Xin xem thêm:

Hướng dẫn tham khảo đầy đủ Canvas của CodeW3C.com