Hình dạng Canvas HTML

thực thể

ví dụ 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Thử ngay

Vẽ đường trên canvas

đường dẫn vẽ sử dụng trên canvas:

phương pháp

beginPath() phương pháp bắt đầu một đường dẫn mới. Nó không vẽ bất cứ điều gì, chỉ định nghĩa một đường dẫn mới.

moveTo() định nghĩa đ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.

lineTo() phương pháp định nghĩa đ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.

stroke() phương pháp vẽ trực tiếp đường. Màu mặc định của bút chì là đen.

Nhiều ví dụ hơn

ví dụ 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Thử ngay

ví dụ 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Thử ngay

Lưu ý

Nếu bạn muốn vẽ hình vuông, bạn không cần vẽ 4 đường.

trong chương tiếp theo, bạn sẽ học cách sử dụng drawRect() phương pháp để vẽ hình vuông.

thuộc tính strokeStyle

strokeStyle thuộc tính định nghĩa kiểu dáng cần sử dụng để vẽ trên canvas.

phải gọi stroke() trước khi gọi phương pháp.

thực thể

ctx.beginPath();
// định nghĩa hình vuông
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// định nghĩa tam giác
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();

Thử ngay

Xin xem thêm:

Hướng dẫn tham khảo hoàn chỉnh Canvas của CodeW3C.com