Canvas lineJoin 属性
示例
在两条线相交的地方创建一个圆角
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(20, 20);
ctx.lineTo(100, 50);
ctx.lineTo(20, 100);
ctx.stroke();
自己动手试一试 »
描述
lineJoin
属性用于设置或返回当两条线相交时创建的角的类型。
合法值:bevel(斜角)、round(圆角)和 miter(尖角)(默认)。
注意
"miter" 值受 miterLimit 属性的影响。
另请参阅
lineCap 属性 (设置端点样式)
lineJoin 属性(设置连接帽)
lineWidth 属性 (设置连接点样式)
fillStyle 属性 (设置填充颜色/样式)
strokeStyle 属性 (设置描边颜色/样式)
语法
context.lineJoin = "bevel|round|miter" |
属性值
值 | 描述 | 试一试 |
---|---|---|
bevel(斜角) | 创建斜角 | 试一试 » |
round | 创建圆角 | 试一试 » |
miter(尖角) | 默认值。创建尖角 | 试一试 » |
浏览器支持
<canvas>
元素是 HTML5 标准(2014)。
lineJoin
在所有现代浏览器中都受支持
Chrome | Edge | Firefox | Safari | Opera | IE |
是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考