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 的话，就显示这个点(在路径内)。没明白吗？没关系，让我们来举个栗子：