Phương thức Canvas lineTo()
Định nghĩa và cách sử dụng
lineTo() Phương pháp này thêm một điểm mới, sau đó tạo một đường từ điểm đó đến điểm cuối cùng được chỉ định trên canvas (phương pháp này sẽ không tạo đường).
Lưu ý:Hãy sử dụng stroke() Phương pháp này vẽ chính xác đường dẫn trên canvas.
Mô hình
Ví dụ 1
Bắt đầu một đường dẫn, di chuyển đến vị trí 0,0. Tạo một đường từ vị trí đó đến 300,150:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
Lưu ý:Cung cấp nhiều ví dụ hơn ở cuối trang.
Cú pháp
context.lineTo(x,y);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| x | Tọa độ x của vị trí mục tiêu của đường dẫn. |
| y | Tọa độ y của vị trí mục tiêu của đường dẫn. |
Thêm nhiều ví dụ
Ví dụ 2
Vẽ một đường dẫn, hình dạng là chữ L:
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.stroke();
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ú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.
