学习HTML5 canvas遇到的问题

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <title>非零环绕原则</title>
 7 </head>
 8 
 9 <body>
10 <canvas id="canvas" style="margin:0 auto;border:1px #666 solid" width="800" height="600">
11 </canvas>
12 <script>
13 var canvas = document.getElementById('canvas');
14 var ctx = canvas.getContext('2d');
15 ctx.moveTo(100, 100);
16 ctx.lineTo(100, 400);
17 ctx.lineTo(400, 400);
18 ctx.lineTo(400, 100);
19 ctx.lineTo(100, 100);
20 
21 ctx.moveTo(200, 200);
22 ctx.lineTo(300, 300);
23 ctx.lineTo(300, 300);
24 ctx.lineTo(300, 200);
25 ctx.lineTo(200, 200);
26 ctx.fill();
27 </script>
28 </body>
29 
30 </html>

View Code