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>