【Canvas杂谈：第一季】我的身后，拖着一条长长的尾巴呀！

[岑安]

这应该是第... 7期了吧。小编有点记不太清了。
马上双十二就要到了。相信所有淘宝小二们，不管有没有具体的双十二的项目在手，都被这个紧张赶项目发布的气氛感染。忙的一塌糊涂。

小编也在此列，双十二发布在即。【Canvas杂谈】这一次，我们就说一个特别特别简单的东西。但是用到合适的地方，会有意想不到的效果。

先看这个【Demo】

进入【Demo】之后，请用鼠标按住，采用类似“拖拽”的操作，mobile设备上用手指按住拖拽。可以发现点或者线段的运动变成了一条有着尾巴的小蝌蚪...

小编不贴代码，因为这一期的重点不是这里面的算法是怎么算的，模拟是怎么做的。
这一期要讨论的，只是这个 “从点和线段转换成带尾巴的线的效果” 是怎么实现的。

它不是我们人肉算法实现的，仅仅是一个很小的小技巧。

fillColor 和 rgba

如题所说，这就是用 rgba的fillColor 是用的一个障眼法。
直接看这个简单的【JS-Bin】

---

好了，本期到此为止。
其实要说的事情再简单不过...

ctx.fillStyle = 'rgba(***)' // 注：颜色无所谓，透明度是关键
ctx.fillRect(0, 0, canvas.width, canvas.height);
...
...

//最后，要注意这种透明度叠加的效果要循环绘制才会生效，不要clearRect