HTML canvas miterLimit property
Examples
5 maximum miter length to draw lines:
JavaScript:
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();
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();
try it"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support miterLimit property.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
miterLimit property sets or returns the maximum length of the miter.
Miter length is the distance between the two lines of intersection of the inner and outer corners.
Note: Only when lineJoin property to "miter", miterLimit valid.
The smaller the angle of the corner, the greater the length of the miter.
To avoid miter length is too long, we can use miterLimit property.
If the miter length exceeds the value miterLimit, the corners will be "bevel" type lineJoin to display (Fig 3):
| Defaults: | 10 |
|---|---|
| JavaScript syntax: | context.miterLimit = number; |
Property Value
| 值 | 描述 |
|---|---|
| number | 正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。 |
HTML canvas Reference Manual