canvas常用画笔样式盘点 - Kaiqisan

canvas常用画笔样式盘点

strokeStyle: 画笔在绘制的时候的颜色设定

ctx.strokeStyle = `rgb(100, 150, 200)` // 也可以使用rgba定义透明度
ctx.strokeStyle = "#15f2dc"
ctx.strokeStyle = "pink"

lineWidth: 画笔粗度

ctx.lineWidth = 3 // 表示画笔粗度为3个像素

lineJoin: 画笔的平滑度,当画出一个角的时候，定义不同的属性值会对尖角处的处理就会不同

ctx.lineJoin = "round"
// 一共有三种属性值 round(尖角处圆滑处理)  bevel(斜角处理，产生类似于折叠的效果) miter(尖角处尖锐化，也是默认效果)

展示效果

round

bevel

miter

lineCap: 定义线条末端的样式

ctx.lineCap = "round"
// 一共有三种属性值 round(在线条末端添加圆形线帽) butt(默认样式) square(在线条末端添加方形线帽)

展示效果

这三条线从上到下分别被 butt square round这三个属性值所渲染，后两个在笔画的两端添加了线帽。

setLineDash : 绘制虚线
lineDashOffset: 规定虚线偏离量

ctx.setLineDash([20, 10]) 
// 分配空闲地方和绘制地方的长短(单位：像素)，这里的意思是从绘制起点开始绘制20像素长度的线之后空闲
// 10像素，然后重复上面的操作，直到绘制到线段的终点

// setLineDash里的数组没有规定一定只能写两个，也可以写好几个，最终它会遵循一个规律就是读取的第单数
// 个数是绘制实线的，读取的第双数个数是不绘制的，然后循环数组，继续读取
ctx.setLineDash([20, 10, 10]) 
// 以它为例，在第一轮读取中读取了第一个数和第三个数之后绘制线段，读取第二个数就不绘制，读完第一组的三个数之后然后再循环数
// 组，接着从第一个数20开始读，此时，一个读取了四个，所以接下来的20像素长度将不绘制，同理，读第二个
// 数10的时候，从整体来说此时它是第五个被读的，为基数，所以接下来绘制10像素长度的线段
ctx.lineDashOffset = 10 // 单位像素

展示效果

第一条线的lineDashOffset为0，从绘制起点开始绘制根据每20像素线段10线段空白来绘制，第二体条的lineDashOffset为10，绘制完的图片向绘制起点偏移10像素。

**PS：**根据这个特性，我们可以结合画布的刷新来实现虚线的动态运动。