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，填充。
如图：
