是否有任何开源库（JaveScript）在画布上实现奇偶填充规则。如果我尝试自己实现它，那么它会有多复杂（考虑也有复杂曲线的一般情况）并且它会影响性能（由于在 JaveScript 中为每个像素执行此操作的开销）。
将奇偶填充转换为非零绕组的方法是什么（考虑适用于每种情况的通用解决方案）。我发现的一种方法是将形状划分为所有不相交的多边形并分别填充它们。
一种选择是使用 SVG 并在画布上绘制 SVG，但我还发现原生 SVG 渲染在 iPad 上有点慢，但即使我在 HTML 画布上（在 iPad 上）绘制 SVG 也很慢？
提前致谢
我前段时间在寻找同样的问题时遇到了这个问题。也就是说，在 HTML 画布中使用“偶数”填充规则。
经过一些研究，并浏览了邮件列表和补丁，我注意到，事实证明，Firefox 和 Chrome 的最新版本都支持这一点，但每个版本都以不同的、特定于浏览器的方式。
在 Firefox 中，这是使用mozFillRule 属性的问题。例子：
//
// Firefox Example
//
// canv has the HTML canvas element
var ctx = canv.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.mozFillRule = 'evenodd';
ctx.beginPath();
ctx.moveTo(100, 10);
ctx.lineTo(40, 180);
ctx.lineTo(190, 60);
ctx.lineTo(10,60);
ctx.lineTo(160,180);
ctx.closePath();
ctx.fill();
在 Chrome 中，您可以通过将字符串evenodd作为参数传递给fill方法来实现。例子：
//
// Chrome Example
//
// canv has the HTML canvas element
var ctx = canv.getContext("2d");
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.moveTo(100, 10);
ctx.lineTo(40, 180);
ctx.lineTo(190, 60);
ctx.lineTo(10,60);
ctx.lineTo(160,180);
ctx.closePath();
ctx.fill('evenodd');
这是我研究的两个浏览器，所以我不知道其他浏览器的状态。希望在不远的将来，我们将能够通过fillRule现在是HTML 标准一部分的属性来使用此功能。
请参阅fill() 方法 API：
void ctx.fill();
void ctx.fill(fillRule);
void ctx.fill(path, fillRule);
fillRule 可以是 "nonzero" 或 "evenodd"
--- "nonzero"：非零缠绕规则，这是默认规则。
--- "evenodd" : 奇偶缠绕规则。
浏览器兼容性：
--- IE 11+、Firefox 31+、Chrome 都可以。
--- 我没有在 IE 9/10 上测试。
---ctx.mozFillRule = 'evenodd';与旧版 Firefox 30/30- 一起使用。
