canvas小画板——（2）荧光笔效果

我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——（1）平滑曲线。

透明度实现荧光笔

现在我们需要加另外一种画笔效果，带透明度的荧光笔。那可能会觉得绘制画笔的时候加上透明度就可以了。我们来在原来代码上设置

ctx.globalAlpha属性为0.3，或者将strokeStyle设置为rgba的形式如rgba(55,55,55,0.3)，代码如下：

View Code

我们鼠标画线出来的效果如下，可以看到有很多重叠区域：

 

对canvas有所了解的同学，知道

lineJoin和

lineCap的话可能会尝试改变这两个属性，实现之后也有同样重叠的效果。

  

 

 

 

解决荧光笔重叠问题 

为什么会有这种重叠渲染颜色的问题呢？细细品味代码，你会发现是因为每次move的时候绘制的部分是上个鼠标点和当前鼠标点之前的连线，这样就会导致头部和尾部有重叠部分多次被stroke了。（不同连接设置的头部尾部重叠不同）

为了避免出现上述重叠这种问题下面介绍两种方法。

利用globalCompositeOperation

现在我们需要用上另外一个api方法

globalCompositeOperation，具体介绍可以看我另外一篇博文讲的比较详细（Canvas学习：globalCompositeOperation详解）。这个小画板荧光笔效果我们需要使用globalCompositeOperation=‘xor’，另外注意透明度的设置不要使用context.globalAlpha，在设置strokeStyle的时候用rgba设置透明度颜色。这个设置也是我不断尝试得出来的，具体为什么可以我也无法给出说法，有待研究或者知道的博友可以在评论给出答案。

 1 
 2 
 3 
 4 
 5     
 6     
15 
16 
17 
18     
19     
71 
72 
73 

存储坐标点

另有一种普遍做法是使用数组points存储每个点的坐标值，每次绘制前先清除画布内容，再循环points数组绘制路径，最后进行一次stroke。

这种方法每次只能保留一条线条，因为在不断的清除画布内容，如果需要保留住的话，可以扩展下points为二维数组，保留每一条线条的所有鼠标点。清除画布后遍历points数组重绘所有线条。

 1 
 2 
 3 
 4 
 5     
 6     
15 
16 
17 
18     
19     
76 
77 
78 

两种解决方法对比 

这两种方法都可以实现荧光笔的效果，如下截图：

 

 

 第一种方法只绘制上个点和当前点，而第二种需要绘制所有线条，所以从流畅性上对比第一种有优势。但如果需要实现橡皮擦的功能第一种就满足不了了，我的一篇博文中具体介绍了橡皮擦的实现可以参看

清除canvas画布内容--点擦除+线擦除