canvas画布绘制线条样式：粗细，圆角，拐角等

矫情吗；* 2024-03-26 23:57 112阅读 0赞

### 线条的粗线 ###

`lineWidth`是改变线条的粗线的，默认是一个像素：

context.beginPath();
    context.moveTo(20, 50);
    context.lineTo(280, 50);
    context.lineWidth=1;
    context.stroke();
    
    // 如果这里没有beginPath 你猜猜这三条线的宽度分别是多少
    context.beginPath();
    context.moveTo(20, 75);
    context.lineTo(280, 75);
    context.lineWidth=5;
    context.stroke();
    
    context.beginPath();
    context.moveTo(20, 100);
    context.lineTo(280, 100);
    context.lineWidth=10;
    context.stroke();

![bf8aa9516f6d426fa5b7b796acdd5fd9.png][]如果上面没有`beginPath`那么后面线描边的时候也会把之前的绘制一下，那么三条先最终的宽度就都是10了。  
`lineWidth`也可用于矩形和圆弧上，只要画线的地方都可以，如下：

context.beginPath();
    context.rect(20, 20, 60, 60);
    context.lineWidth=20;
    context.stroke();

![b495d137bc484f44b346b517f99cc41e.png][]

我们可以看到改变`lineWidth`，矩形的大小也变了，目前的宽度是`矩形的宽度 + lineWidth`（左边多了一半，右边也多了一半）。

### 线帽样式 ###

线帽样式由lineCap来定义，它有三个值`butt | round | square`分别对应`无线帽 | 圆角 | 方形`，默认是`butt`（无线帽），如下：

context.beginPath();
    context.moveTo(20, 50);
    context.lineTo(280, 50);
    context.lineWidth=10;
    context.lineCap='butt';// 无线帽 默认值
    context.stroke();
    
    context.beginPath();
    context.moveTo(20, 75);
    context.lineTo(280, 75);
    context.lineWidth=10;
    context.lineCap='round'; // 圆角
    context.stroke();
    
    context.beginPath();
    context.moveTo(20, 100);
    context.lineTo(280, 100);
    context.lineWidth=10;
    context.lineCap='square'; // 方形
    context.stroke();

![ee65467a14394900b89375b6e16bb996.png][]

线帽样式对于越宽的线条效果越明显，所以上面线宽给了一个10。同时可以看到线帽给的不一样，宽度其实也是有点不同的。  
线帽只是对线条2端点的样式做了处理，如果是线条中间的那么就不生效了：

context.beginPath();
    context.moveTo(100, 50);
    context.lineTo(200, 50);
    context.lineTo(200, 100);
    context.lineWidth=20;
    context.lineCap='round';
    context.stroke();

![37fe65038f3f4b6193799449e20294e8.png][]

如果要改变中间的样子那该怎么办？那么就是用`lineJoin`。

### 线条交界处样式 ###

线条交界处样式由`lineJoin`来决定，它有三个值`miter | bevel | round`分别是`尖角 | 斜角 | 圆角`，默认是`miter`。斜角时如下：

context.beginPath();
    context.moveTo(100, 50);
    context.lineTo(200, 50);
    context.lineTo(200, 100);
    context.lineWidth=20;
    context.lineCap='round';
    context.lineJoin='bevel';
    context.stroke();

![bfb3a78ba7dd4f3ab6ee430ee07f5135.png][]

如果`context.lineJoin='bevel';`改为`context.lineJoin='round';`时，结果如下：![fb9d875da88947d18e141810da888e5f.png][]

### 绘制虚线 ###

虚线是由细小的实线和空白组成，绘制虚线使用`setLineDash`方法，它接收一个数组作为参数，数组是实线和空白的长度：

context.beginPath();
    context.arc(150, 75, 60, Math.PI / 180 * 0, Math.PI / 180 * 360);
    // 实线和空白比例是10px : 5px
    context.setLineDash([10,5]);
    context.stroke();

![713eb7aaa8f046bd8c6788dfe02b98d3.png][]

值的一提的是，如果不传数组的话，那么就会报错；传一个空数组的话，会按照实线去绘制；如果数组只有一个元素的话，那么就是实线和空白依次按这个元素大小来绘制；如果多个元素的时候就是交替循环来间隔。

[bf8aa9516f6d426fa5b7b796acdd5fd9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/b3825cb82c924df3a6e94c71a1c9014c.png
[b495d137bc484f44b346b517f99cc41e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/b5af6beb349b41c9b375efa9df9836c1.png
[ee65467a14394900b89375b6e16bb996.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/f7e81a5104e843949e9f75b2266a5406.png
[37fe65038f3f4b6193799449e20294e8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/2f75bc1700ee46dca3a531aa4fe45abf.png
[bfb3a78ba7dd4f3ab6ee430ee07f5135.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/a3ed356f657a4f5f850bf8780e81d104.png
[fb9d875da88947d18e141810da888e5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/b9f58cb534224797b9143027091801cb.png
[713eb7aaa8f046bd8c6788dfe02b98d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/ddc6b35f312e44c8a573f2a91e6bd8dd.png