标签：meta   注意   margin   idt   lock   pat   stroke   class   图形   

学习HTML5 canvas遇到的问题

1. 非零环绕原则(nonzZero rule) 

• 非零环绕原则是canvas在进行填充的时候是否要进行填充的判断依据。
• 在判断填充的区域拉一条线出来，拉到图形的外面，这条拉出来的线就是辅助线。判断绘制的线是否是从辅助线的左边穿过到辅助线的右边，此时这种穿过的方式记录为+1;如果是从辅助线的右边穿到辅助线的左边，就记做-1.最后将所有记录的数字进行求和，如果求和的结果为0，代表这块区域不要填充，否则，必须填充
• 上面的原理较难理解，可以这样理解，当在大矩形中绘制小矩形，大矩形的绘制方向与小矩形的绘制方向相同时，填充颜色后，大小矩形都填充相同颜色；大矩形的绘制方向与小矩形的绘制方向相反时，填充颜色后，小矩形不会填充颜色，大矩形与小矩形之间的区域会填充颜色。
• 大矩形的绘制方向与小矩形的绘制方向相同时的代码

 1 
 2 
 3 
 4 5  6  7 
 8 
 9 
10 11 12 28 
29 
30 

• 大矩形的绘制方向与小矩形的绘制方向相同时的效果图
• 
• 大矩形的绘制方向与小矩形的绘制方向相反时的代码

•  1 
   2 
   3 
   4  5  6  7 
   8 
   9 
  10 11 12 28 
  29 
  30 

   

• 大矩形的绘制方向与小矩形的绘制方向相反时效果图

2. closePath() 与 lineTo()的区别 

• closePath与lineTo闭合是有区别的,closePath闭合自然，lineTo闭合会有锯齿,仅在闭合的连接处会有区别
• 效果图
• 

•  

   1 
   2 
   3 
   4  5  6  7 14 
  15 
  16 
  17 18 33 
  34 

   

3. arc绘图的注意事项 

• 使用 arc 绘图的时候, 如果没有设置 moveTo ,那么会从开始绘弧的地方作为起始点，连线到圆弧的起点.
• 如果使用 stroke 方法, 那么会连线到圆弧的起始位置. 如果是 fill 方法, 会自动闭合路径填充.

•  

   1 
   2 
   3  4  5  6 13 
  14 
  15 16 41 
  42 

   

• 效果图
• 

3.1 解决方法一：使用beginPath()，开启新的路径，两次绘制的图形就不会相互产生影响

 1 
 2 
 3  4  5  6 13 
14 
15 16 27 
28 

效果图

3.2 解决方法一：使用moveTo(),将上一个图形的终点移动到下一个即将绘制的图形上，就可以解决问题,效果与上面的解决方法相同。但是，该方法只需要使用一次stroke().

 1 
 2 
 3  4  5  6 13 
14 
15 16 26 
27 

3.3  arc的一个小应用，绘制圆环进度条，使用了lineWidth

 1 
 2 
 3 
 4  5  6  7 14 
15 
16 
17 18 51 
52 
53 

效果图

4. arcTo()的使用

• arcTo绘制圆角，需要线端点，矩形顶点以及另一线段的端点三个参考点

•  

   1 
   2 
   3 
   4  5      6      7     14 
  15 
  16 
  17     18     64 
  65 
  66 

   

• 效果图
• 

 原文链接：http://www.cnblogs.com/stevexu/p/7196081.html

转载《学习HTML5 canvas遇到的问题》

标签：meta   注意   margin   idt   lock   pat   stroke   class   图形   

原文地址：http://www.cnblogs.com/fangsmile/p/7268553.html