19/09/2018, 14:59
lineTo() trong Canvas
Bắt đầu nét vẽ, di chuyển tới vị trí 0,0. Tạo một đường thẳng tới vị trí 300,150: Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! ...
Bắt đầu nét vẽ, di chuyển tới vị trí 0,0. Tạo một đường thẳng tới vị trí 300,150:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(300, 150); ctx.stroke(); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| lineTo() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức lineTo() dùng để thêm một điểm mới và tạo một đường thẳng từ điểm đó tới điểm hiện tại trên canvas (đường thẳng chưa hiển thị trên canvas).
Mẹo: Sử dụng phương thức stroke() để thể hiện nét vẽ trên canvas.
Cú pháp JavaScript: context.lineTo(x,y);
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| x | Tọa độ X của điểm mới |
| y | Tọa độ Y của điểm mới |
Ví dụ
Vẽ chữ L
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> 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(); </script> </body> </html> |
Demo
