首页 > 代码库 > Canvas中的非零围绕规则原理
Canvas中的非零围绕规则原理
非零围绕规则:对于路径中指定范围区域,从该区域内部画一条足够长的线段。使此线段的全然落在路径范围之外。
非零围绕规则计数器:
然后,将计数器初始化为0,每当这个线段与路径上的直线或曲线相交时,就改变计数器的值,假设是与路径顺时针相交时。那么计数器就加1, 假设是与路径逆时针相交时。那么计数器就减1.
假设计数器始终不为0,那么此区域就在路径范围里面,在调用fill()方法时,浏览器就会对其进行填充。假设终于值是0,那么此区域就不在路径范围内,浏览器就不会对其进行填充。
从上图中看
第一条线段:依据非零围绕规则,这条直线仅仅经过路径一次且路径是逆时针方向,那么计数器为-1;依据浏览器对计数器的计算原理得出,当调用fill()方法时浏览器会填充此区域。
第二条线段:依据非零围绕规则。这条直线经过路径二次且路径都是逆时针方向。那么计数器为-2;依据浏览器对计数器的计算原理得出,当调用fill()方法时浏览器会填充此区域。
第三条线段:依据非零围绕规则。这条直线经过路径二次;第一次经过的路径是逆时针方向,计数器则为-1; 第二次经过的路径是顺时针方向,计数器为1;原因计数器的终于值为0-1+1 = 0;所以依据浏览器对计数器的计算原理得出,当调用fill()方法时浏览器不会填充此区域。
依据上面的原理。演示画一个环形图的实例
例如以下图:
实例代码:
<style type="text/css"> canvas { border:1px solid #e5e5e5; } </style> <canvas id="firstCanvas" width="400" height="400"> Canvas not supported </canvas> <script type="text/javascript"> var canvas = document.getElementById("firstCanvas"), context = canvas.getContext && canvas.getContext("2d"); context.fillStyle = "#ff6600"; // clear current subPath context.beginPath(); // outer circle context.arc(200, 200, 100, 0, Math.PI * 2, true); // inner circle context.arc(200, 200, 50, 0, Math.PI * 2, false); context.fill(); </script>
Canvas中的非零围绕规则原理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。