19/09/2018, 15:00
beginPath() trong Canvas
Vẽ 2 nét trong canvas, một màu xanh lá cây và một màu tím 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 21 22 23 24 25 26 27 28 ...
Vẽ 2 nét trong canvas, một màu xanh lá cây và một màu tím
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 21 22 23 24 25 26 27 28 |
<!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.lineWidth = "5"; ctx.strokeStyle = "green"; // Nét xanh lá cây ctx.moveTo(0, 75); ctx.lineTo(250, 75); ctx.stroke(); // Draw it ctx.beginPath(); ctx.strokeStyle = "purple"; // Nét tím ctx.moveTo(50, 0); ctx.lineTo(150, 130); ctx.stroke(); // Hiển thị </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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| beginPath() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức beginPath() dùng để bắt đầu nét vẽ hoặc thiết lập lại nét vẽ hiện tại.
Mẹo: Sử dụng phương thức moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arcTo() và arc() để tạo nét vẽ.
Mẹo: Sử dụng phương thức stroke() để hiển thị nét vẽ trên canvas.
Cú pháp JavaScript: context.beginPath();
