canvas自定义线条两端

Canvas可以通过lineCap属性来定义线条两端的样式，lineCap属性有三个值可选：butt、round、square。

- butt：默认值，线条两端直接结束。
- round：线条两端以圆形结束。
- square：线条两端以正方形结束。

示例代码：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 10;
ctx.lineCap = 'butt';
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.stroke();

ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();

ctx.lineCap = 'square';
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.stroke();

效果如下图所示：


相关问题

canvas自定义线条两端样式有没有其他方法

除了使用lineCap属性设置线条两端样式外，还可以使用线条的渐变来实现不同样式的线条。

例如，可以使用createLinearGradient()方法创建一个线性渐变对象，然后将其作为strokeStyle属性的值来绘制线条。通过控制渐变的颜色和位置，可以实现不同样式的线条。

另外，还可以使用setLineDash()方法来设置虚线样式的线条。该方法接受一个数组参数，用于指定线条的实线和虚线的长度，可以实现各种不同的线条样式。

canvas自定义线条笔帽

Canvas中可以通过设置lineCap属性来自定义线条的笔帽。lineCap有三个可选值：butt、round和square。

- butt：默认值，线条的末端是平直的，不会超过线条的终点。
- round：线条的末端是圆形的，会超过线条的终点一半的宽度。
- square：线条的末端是方形的，会超过线条的终点一半的宽度。

示例代码：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

// 绘制线条
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.stroke();

// 设置线条笔帽
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();

ctx.lineCap = 'square';
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.lineTo(250, 150);
ctx.stroke();

效果如下图所示：