Canvas中的非零环绕规则原理

标签：

非零环绕规则：对于路径中指定范围区域，从该区域内部画一条足够长的线段，使此线段的完全落在路径范围之外。

第三条线段：根据非零环绕规则，这条直线经过路径二次;第一次经过的路径是逆时针方向，计数器则为-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中的非零环绕规则原理

标签：

原文地址：http://blog.csdn.net/itpinpai/article/details/50412260