19/09/2018, 14:55
lineCap trong Canvas
Có 3 kiểu mũ cho dòng kẻ : 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 29 30 31 32 33 34 35 ...
Có 3 kiểu mũ cho dòng kẻ :
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 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <body> <p>Có 3 kiểu mũ cho dòng kẻ :</p> <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 = 10; ctx.lineCap = "butt"; ctx.moveTo(20, 20); ctx.lineTo(200, 20); ctx.stroke(); ctx.beginPath(); ctx.lineCap = "round"; ctx.moveTo(20, 40); ctx.lineTo(200, 40); ctx.stroke(); ctx.beginPath(); ctx.lineCap = "square"; ctx.moveTo(20, 60); ctx.lineTo(200, 60); 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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| lineCap | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Thuộc tính lineCap dùng để thiết lập hoặc trả về kiểu mũ cho 2 đầu dòng kẻ.
Lưu ý: Giá trị “round” và “square” sẽ làm cho dòng kẻ hơi dài hơn.
Giá trị mặc định: butt
Cú pháp JavaScript: context.lineCap=”butt|round|square”;
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| butt | Mặc định. 2 đầu của đường thẳng sẽ là cạnh phẳng |
| round | Thêm mũ tròn vào 2 đầu của đường thẳng. |
| square | Thêm mũ vuông vào 2 đầu của đường thẳng. |
