miterLimit trong Canvas
Mũi tên tạo bởi 2 đường thẳng có độ dài tối đa là 5 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 < ! DOCTYPE ...
Mũi tên tạo bởi 2 đường thẳng có độ dài tối đa là 5
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 |
<!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> <p>Hãy thử thiết lập miterLimit thành 4 (độ dài hiện tại của miter đang hơn 4) và bạn sẽ thấy mũi tên tạo bởi 2 đường thẳng này sẽ mất đi 1 đoạn.</p> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.lineWidth = 10; ctx.lineJoin = "miter"; ctx.miterLimit = 5; ctx.moveTo(20, 20); ctx.lineTo(50, 27); ctx.lineTo(20, 34); 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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| miterLimit | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Thuộc tính miterLimit dùng để thiết lập hoặc trả về độ dài tối đa của mũ hợp bởi 2 đường thẳng.
Độ dài của mũ là khoảng cách được tính từ góc trong tới góc ngoài chỗ 2 đường thẳng cắt nhau.
Mẹo: Thuộc tính miterLimit chỉ hoạt động khi thuộc tính lineJoin có giá trị là “miter”.
Góc hợp bởi 2 đường thẳng càng nhỏ thì độ dài mũ càng lớn.
Để chiều dài của mũ không quá dài, lúc này chúng ta sẽ phải sử dụng thuộc tính miterLimit.
Nếu độ dài của mũ vượt quá giá trị miterLimit quy định, góc sẽ được hiển thị dưới kiểu lineJoin là “bevel” (hình 3):
Giá trị mặc định: 10
Cú pháp JavaScript: context.miterLimit=number;
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| number | Một số dương quy định độ dài tối đa của mũ. Nếu độ dài của mũ hiện tại vượt quá miterLimit, góc sẽ được hiển thị với kiểu lineJoin là "bevel" |
