HTML canvas closePath() phương thức
Định nghĩa và cách sử dụng
closePath() phương thức tạo đường dẫn từ điểm hiện tại đến điểm bắt đầu.
Lưu ý:Sử dụng stroke() phương thức để vẽ đường dẫn chính xác trên canvas.
Lưu ý:Sử dụng fill() Sử dụng phương thức để vẽ hình ảnh (mặc định là màu đen). Hãy sử dụng fillStyle Sử dụng thuộc tính để tô màu hoặc chuyển màu.
Các ví dụ
Ví dụ 1
Vẽ một đường dẫn dưới dạng chữ L, sau đó vẽ đường để trở về điểm bắt đầu:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
Lưu ý:Cung cấp thêm các ví dụ ở cuối trang.
Ngữ pháp
context.closePath();
Các ví dụ khác
Ví dụ 2
Chọn màu xanh lá cây làm màu tô:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fill();
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
