一、 非零环绕原则(nonzZero rule)
1,非零环绕原则——canvas在进行填充的时候是否要进行填充的判断依据。
2,辅助线——在判断填充的区域拉一条线出来，拉到图形的外面，这条线叫做辅助线。绘制的线从辅助线的左边穿过到辅助线的右边，此时记录为+1；
从辅助线的右边穿过到辅助线的左边，此时记录为-1;将所有记录的数字进行求和，求和的结果为0，代表区域不用填充，否则，必须填充。
也可以这样理解：当在大矩形中绘制小矩形，大矩形的绘制方向与小矩形的绘制方向相同时，填充颜色后，大小矩形都填充相同颜色；大矩形的绘制方向与小矩形的绘制方向相反时，填充颜色后，小矩形不会填充颜色，大矩形与小矩形之间的区域会填充颜色。
具体代码：
大小矩形绘制方向相同时：
此时的效果图：
绘制方向相反时的代码：
此时的效果图：
二、arc绘图的注意事项
-
使用 arc 绘图的时候, 如果没有设置 moveTo ,那么会从开始绘弧的地方作为起始点，连线到圆弧的起点.
-
如果使用 stroke 方法, 那么会连线到圆弧的起始位置. 如果是 fill 方法, 会自动闭合路径填充.
具体代码：
效果图：
解决方法一：使用beginPath()，开启新的路径，两次绘制的图形就不会相互产生影响
代码：
效果图：
解决方法二：使用moveTo(),将上一个图形的终点移动到下一个即将绘制的图形上，就可以解决问题,效果与上面的解决方法相同。但是，该方法只需要使用一次stroke().
3.3 arc的一个小应用，绘制圆环进度条，使用了lineWidth
效果图：
三、 closePath() 与 lineTo()的区别
closePath与lineTo有区别，closepath闭合自然，lineTo闭合有锯齿，闭合的联系处于区别。
效果图：
四、 arcTo()的使用
arcTo绘制圆角，需要三个端点，分别为：线端点，矩形顶点以及另一线段的端点。
效果图：
文章来自：源码在线https://www.shengli.me/h5/46.html