Canvas lineCap 属性
示例
绘制带有圆角端点的线
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20, 20);
ctx.lineTo(20, 200);
ctx.stroke();
自己试试 »
描述
The lineCap 属性设置或返回线的端点样式。
合法值：butt（默认）、round 和 square。
注意
值 round 和 square 使线略微变长。
另请参阅
lineCap 属性 （设置端点）
lineJoin 属性 （设置连接端点）
lineWidth 属性 （设置连接端点）
fillStyle 属性 （设置填充颜色/样式）
strokeStyle 属性 （设置描边颜色/样式）
语法
| context.lineCap = "butt|round|square" |
属性值
| 值 | 描述 | 播放它 |
|---|---|---|
| butt | 线端部的平直边缘 | 播放它 » |
| round | 线端部的圆形端点 | 播放它 » |
| square | 线端部的方形端点 | 播放它 » |
浏览器支持
The <canvas> 元素是 HTML5 标准（2014 年）。
lineCap 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
