Ví dụ và cách sử dụng phương thức lineTo[] để 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.
in Thư viện thuộc tính HTML
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 | Trình duyệtcủabạnkhônghỗtrợthẻcanvas trong HTML5. varc= document.getElementById["myCanvas"]; varctx=c.getContext["2d"]; ctx.beginPath[]; ctx.moveTo[0, 0]; ctx.lineTo[300,150]; ctx.stroke[];
|
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.
| 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ố
| 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 | Trình duyệtcủabạnkhônghỗtrợthẻcanvas trong HTML5. varc= document.getElementById["myCanvas"]; varctx=c.getContext["2d"]; ctx.beginPath[]; ctx.moveTo[20, 20]; ctx.lineTo[20,100]; ctx.lineTo[70,100]; ctx.stroke[];
|
Demo