canvas 小技巧

1.开启禁用 阴影效果

canvas规范 绘制阴影条件

1. 指定了一个非全透明的 shadowColor
2. shadowBulr、shadowOffsetX、shadowOffsetY之中，至少有一个属性不为零

2.Canvas图层的概念以及save()和restore()

对当前canvas的状态进行保存，其实Canvas为 我们提供了图层(Layer)的支持，而这些Layer(图层)是按”栈结构”来进行管理的

1. 可以多次save() 来保存多个图层状态
2. 通过restore()的多次调用来以“先存后取“获取 save()状态
3. 在restore()后调用save() 会覆盖 之前的save()状态 （可以理解为之前的save被清空了）

3.填充路径规则 “ 非零环绕规则“

当填充的路径是循环 或者是多个相交的子路径

非零环绕规则：对于路径中指定范围区域，从该区域内部画一条足够长的线段，使此线段的完全落在路径范围之外。

非零环绕规则计数器：
然后，将计数器初始化为0，每当这个线段与路径上的直线或曲线相交时，就改变计数器的值，如果是与路径顺时针相交时，那么计数器就加1（加1减1都行和逆时针方向相反就行）， 如果是与路径逆时针相交时，那么计数器就减1.
如果计数器始终不为0，那么此区域就在路径范围里面，在调用fill()方法时，浏览器就会对其进行填充。如果最终值是0，那么此区域就不在路径范围内，浏览器就不会对其进行填充。