Canvas的fill()填充规则

在Canvas中使用fill()进行填充，遵循非零环绕填充规则。

非零环绕填充规则：如果想知道某一区域是否被填充，就从这一区域画一条直线向外，在与其他线的交点处，如果其他线是顺时针方向画的，就+1，逆时针则-1，如果最后总和为0，则不会填充，非零则填充。

例如：假设有两个长方形，外面大的长方形是顺时针反方向画的，里面的小长方形是逆时针方向画的。

var myCanvas = document.querySelector("canvas");
		var ctx = myCanvas.getContext("2d");

		// 大长方形,顺时针
		ctx.moveTo(100,100);
		ctx.lineTo(400,100);
		ctx.lineTo(400,300);
		ctx.lineTo(100,300);
		ctx.closePath();

		// 小长方形，逆时针
		ctx.moveTo(150,150);
		ctx.lineTo(150,250);
		ctx.lineTo(350,250);
		ctx.lineTo(350,150);	
		ctx.closePath();	
		ctx.fill();

效果图如下：