1先繪製一個大的正方形
2繪製一個小的正方形，位於大正方形的中部
3.填充後我們會得到什麼圖形？
我們接下來試一下：
代碼：
<style>
canvas {
border: 1px #333 solid;
}
</style>
<body>
<!-- 1.定義一個畫板 -->
<canvas id="canvas01" width="400px" height="600px"></canvas>
</body>
</html>
<script>
var myCanvas = document.getElementById('canvas01');
var ctx = myCanvas.getContext('2d');
// 大的正方形、
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();
ctx.stroke();
// 繪製小的正方形
ctx.moveTo(150,150);
ctx.lineTo(250,150);
ctx.lineTo(250,250);
ctx.lineTo(150,250);
ctx.closePath();
// 描邊
ctx.stroke();
ctx.fill();
</script>
效果：
結果：我們只看到了黑色的大正方形，沒有看到小正方形。我們現在逆時針描繪小正方形。
代碼：
// 第二種
// 大的正方形、
ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();
ctx.stroke();
// 繪製小的正方形
ctx.moveTo(150,150);
ctx.lineTo(150,250);
ctx.lineTo(250,250);
ctx.lineTo(250,150);
ctx.closePath();
// 描邊
ctx.stroke();
ctx.fill();
效果：
我們可以看到，逆時針描繪小正方形，小正方形沒有填充顏色，我們得到了一個鏤空的正方形。
原因：
非零環繞填充規則：看一塊區域是否被填充，可以重這個區域拉一條線出去，看和這條直線相交的軌跡，如果遇到順時針軌跡加1，如果遇到逆時針軌跡減1，將所以軌跡的值計算出來，如果是非零就填充，如果等於零不填充。
當我們順時針描繪小正方形時，直線相交的兩個點爲順時針，結果爲2，填充。逆時針描繪時，直線相交的兩個點結果爲0，不填充。而大的正方形，直線只相交於大正方形的邊，結果爲1，填充。
如圖：
