在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();效果图如下：