2 路径的填充和描边

2.1 描边

描边操作：

ctx.stroke();

注意 ： 根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke

描边样式设置：

ctx.lineWidth = 20;    //设置线的宽度
ctx.strokeStyle = 'rgba(0,0,255,0.3)';    //设置描边颜色

描边注意问题:在原有盒子基础上，描边会里外均等分布

2.2 填充

填充操作：

ctx.fill();

填充，是将闭合的路径的内容填充具体的颜色。默认黑色。

填充样式设置：

ctx.fillStyle = 'rgba(255,0,0,0.3)';    //填充颜色

注意：交叉路径的填充问题

“非零环绕原则”，顺逆时针穿插次数决定是否填充。

以下是非0环绕原则的原理：（了解即可，非常少会用到复杂的路径）

​ “非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，

​ 使此线段的终点完全落在路径范围之外。

​ 图2-14中的那三个箭头所描述的就是上面这个步骤。

​ 接下来，将计数器初始化为0，

​ 然后，每当这条线段与路径上的直线或曲线相交时，

​ 就改变计数器的值。如果是与路径的顺时针部分相交，则加1，

​ 如果是与路径的逆时针部分相交，则减1。若计数器的最终值不是0，那么此区域就在路径里面，在调用fill()方法时，

​ 浏览器就会对其进行填充。

​ 如果最终值是0，那么此区域就不在路径内部，浏览器也就不会对其进行填充了