canvas 两个圆相交重叠区域颜色填充_「译」Canvas中的环绕规则 -Winding rules in Canvas...

前言

已经确定了未来一段时间会在Canvas相关领域深耕了，最近刚开始读fabric.js的源码并完成了3w行左右代码的首轮阅读，后续会深入了解背后的原理。在源码的阅读过程中遇到了不少问题，也解决了不少问题，对Canvas绘图的理解也在慢慢加深。后面会有更多关于Canvas绘图的相关文章，可能有译文，也可能有原创，希望大家喜欢。欢迎大家关注我，并希望我的分享能给同处前端的你带来一点点收获

1、什么是缠绕规则？

对于任何图形库来说，路径都是一个非常基本的构建模块。每次你绘制路径的时候，你的浏览器需要确定画布上的这个点是否在另外一个封闭的曲线里。如果这个路径是简单的圆形或长方形还好说，但是当与其他路径相交，或者这个路径本身就嵌套着许多路径的话，就并不能很清晰的显现了。

一个路径中的点应该被如何填充，通常有两种常用方法来规约：“ 非零 ”(‘non-zero’ winding)和“ 奇偶 ”(‘even-odd’ winding)。

1.1 “非零”缠绕(‘non-zero’ winding)

要判断一个在另一个曲线内的点，你需要绘制一条 过该点的直线。然后计算这条直线需要穿过多少路径才能到达这个点。如果穿过的路径绘制方向是顺指针，则 -1，若为逆时针，则 +1。(没穿过则为 0 )

如果相加总和不等于 0 的话，就显示这个点(在路径内)。没明白吗？没关系，让我们来举个栗子：

这是一个由 2 个圆组合成的路径。外圆逆时针方向绘制，内圆顺时针方向绘制。(arc 的最后一个参数 true 或 false)

我们有3个点，并且需要确定它们是否落在路径内。本例中的辅助线是如图中的从左下到右上，但你可以随意做辅助线，只要穿过我们要确认的点就行。

• 点1、和= 1 ≠0 在路径里面，可以填充颜色
• 点2、和= 1 – 1 = 0 在路径外面，不可以填充颜色
• 点3、和= 1 – 1 – 1 = -1 ≠0 在路径里面，可以填充颜色

下面，我们改变一下内圆的环绕方向：

• 点1、和 = 1 ≠ 0 填充
• 点2、和 = 1 + 1 = 2 ≠ 0 填充
• 点3、和 = 1 + 1 + 1 = 3 ≠ 0 填充

1.2 “奇偶”缠绕(‘even-odd’ winding)

如果要判断一个点是否落在路径里面，咱们和刚才一样，再通过这个点画一条线。这次，你只需要简单的数一数这条线到达这个点的时候，一共穿越了几个路径。如果总数为偶数，则这个点不在路径里面; 如果是奇数，则在里面。冗杂环绕的路径可以被忽略。(意思是，穿越到这个点所需的最少穿越路径数)例如：

• 点1、和 = 1，奇数，在路径里
• 点2、和 = 1 + 1 = 2，偶数，不在路径里
• 点3、和 = 1 + 1 + 1 = 3，奇数，在路径里

“奇偶”缠绕规则相对来说更容易被我们掌握和使用，因为我们在绘制时很难记住之前的缠绕方向。举个栗子，就跟上面图片一样，你想用一个大圆，一个小圆做一个类似于甜甜圈一样的圆环，如果你采用了“非零”缠绕规则去绘制，那么你要做的是改变里面小圆的绘制方向。但是如果你使用了“奇偶”规则，那么你只需要在路径内继续绘制一个路径，叠加后变成偶数，就会绘制成功了。

2、兼容情况

WebKit 和 Mozilla 内核的底层图形 API 已经支持了缠绕规则，所以很容易使用。你可以下载一个 nightly Firefox, WebKit 或 Chromium 构建和体验新功能。特别感谢 Mozilla 和 WebKit 的开发人员对这个 API 的快速支持！

参考资料：

https://www.zhangxinxu.com/wordpress/2018/10/nonzero-evenodd-fill-mode-rule/

http://blogs.adobe.com/webplatform/2013/01/30/winding-rules-in-canvas/

http://blog.hooperui.com/%E8%AF%91-canvas-%E7%9A%84%E7%8E%AF%E7%BB%95%E8%A7%84%E5%88%99-winding-rules-canvas