html canvas 问题

一、 非零环绕原则(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