LineCap | HTML<canvas> 属性

定义与用法

lineCap 属性设置或返回线条末端线帽的样式。

提示：“round” 和 “square” 值会使线条略微变长。

语法格式

context.lineCap=”butt|round|square”;

默认值：butt

示例代码

<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>

效果展示：

三种不同的结束线:

亲自试试

浏览器支持

属性
LineCap	Yes	Yes	Yes	Yes	Yes

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineCap 属性。

提示：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

属性值