canvas非零绕组规则与奇偶规则

2018-8-9 08:57| 作者: admin| 查看: 1209| 评论: 0|来自: 蚂蚁部落

大家知道canvas种使用fill()方法可以填充路径。

其实这个填充也是有规则的,具体语法结构如下:

[JavaScript] 纯文本查看 复制代码
ctx.fill();
ctx.fill(fillRule);
ctx.fill(path, fillRule);

关于path参数这里咱们先不介绍,具体可以参阅canvas Path2D对象一章节。

fillRule参数就是用来规定填充规则的,可被允许的值如下:

(1)."nonzero": 非零环绕规则, 默认的规则。

(2)."evenodd": 奇偶环绕规则。

下面就对这个规则做一下介绍:

1.png

假设从内部做一条指向无穷远的射线(当然这个线会穿透所有的曲线)。

下面就分别针对两个规则作介绍:

(1).对于奇偶规则:曲线和射线有两个交点(或交点个数为偶数),按照奇偶规则,此点在路径之外,那么调用fill()方法时不会填充,反之就会进行填充。

(2).对于非零规则:将计数器初始化为0,每当这个线段与路径上的直线或曲线相交时,就改变计数器的值,如果是与路径顺时针相交时,那么计数器就加1, 如果是与路径逆时针相交时,那么计数器就减1,如果计数器始终不为0,那么此区域就在路径范围里面,在调用fill()方法时,就会对其进行填充。如果最终值是0,那么此区域就不在路径范围内,不会对其进行填充。

掌握了上面的理论,那么对canvas绘制立体圆环代码实例一章节中,为什么只填充一个圆环就可以理解了。


鲜花

握手

雷人

路过

鸡蛋
返回顶部