Phương pháp HTML canvas lineTo()
Định nghĩa và cách sử dụng
lineTo() phương pháp thêm một điểm mới, sau đó tạo đườ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 vẽ con đường chính xác trên canvas.
thực tế
Ví dụ 1
Bắt đầu một con đường, 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 thêm các ví dụ tại chân trang.
cú pháp
context.lineTo(x,y);
giá trị tham số
| tham số | miêu tả |
|---|---|
| x | tọa độ x của vị trí mục tiêu của con đường. |
| y | tọa độ y của vị trí mục tiêu của con đường. |
更多示例
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ú：Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
