fill()

根据当前的填充样式,填充当前或已存在的路径的方法.采取非零环绕或者奇偶环绕规则.

  ctx.fill()
  ctx.fill(fillRule)
  ctx.fill(path, fillRule)

参数

fillRule Number 一种算法,决定点是在路径内还是在路径外. "nonzero": 非零环绕规则,默认的规则 "evenodd": 奇偶环绕规则

path Number 需要填充的Path2D 路径

测验

设定三个点,然后fill(),效果如下.可见填充了路径所包围的面积,即使路径没有闭合也会当做闭合路径填充

evenodd

奇偶环绕规则,以下两个5角星对比,左边是默认规则fill(),右边是fill("evenodd")

6角星8角星,填充参数为"evenodd".可见中间没有填充.

下图两个同心圆,采用非零填充.这里有个关键点,两个圆的路径走向是相反的,外圈是顺时针,内圈是逆时针.根据非零规则,从内圈范围内发出的射线会与

两圆路径相交两次,而且一次是顺时针路径相交,一次是逆时针路径相交,记数结果为0.故内圈不属于路径范围,所以内圈不会被填充.

但是内圈里有个矩形被填充了,还是根据非零规则,从矩形范围内发出的射线会与路径有三次相交,两次是与内外圈的圆相交,结果为0,一次与矩形的边相交

结果为1(或-1),所以在路径范围内,故被填充了

如果采用两个矩形,能否达到上述效果呢.当然可以,不过如果是使用rect()画的矩形则不行,rect()只按顺时针画矩形

而要达到上面效果,也需要内外矩形走向相反.所以内层的矩形要手动画一个逆时针走向的才行.

@Model.book (68页)

path

需要填充的Path2D 路径,暂无测验

非零环绕规则

平面内任何一点p做射线,射线长度要超过多边形范围,射线与多边形相交(不碰到顶点),如果顺时针走向的边与射线相交则

记+1(记数器以0开始),逆时针走向的边与射线相交记-1.最终计算结果为0时,p在多边形外,非0时在多边形内

举例说明,一个5角星,边的走向顺序规定为(A~B)(B~C)(C~D)(D~E)(E~A),图中绿色箭头指向

有一点p的射线,与边(A~B)(D~E)相交,从方向上看,这两边都是逆时针走向的,所以最终记为-2

由于-2!=0,所以p点是这5角星内的点.所以fill()方法会填充整个5角星

奇偶环绕规则

平面内任何一点p做射线,与多边形相交(不碰到顶点),如果交点为奇数,则p在其内,反之在其外

这条规则简单一些,就是看交点的奇偶数.下图p射线与5角星有两个交点,是偶数.所以p不在其内.

所以填充fill("evenodd")不包含这个区域