学习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>
查看更多关于HTML5中canvas的问题总结的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did40707