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();

效果图如下:

 

原文链接:加载失败,请重新获取