Javascript 在HTML画布上使用奇偶填充

是否有在画布上实现奇偶填充规则的开源库（JaveScript）。 如果我试着自己实现它，那么它会有多复杂（考虑到一般情况下也有复杂的曲线），它会影响性能（由于对JaveScript中的每个像素执行此操作的开销）

将奇偶填充转换为非零绕组的方法有哪些（考虑适用于每种情况的通用解决方案）。我发现的一种方法是将形状分成所有不相交的多边形，然后分别填充它们

一种选择是使用SVG并在画布上绘制SVG，但我还发现，在iPad上原生SVG渲染有点慢，但即使在HTML画布（在iPad上）上绘制SVG，SVG是否也很慢

---

提前感谢

我在前一段时间寻找这个问题时遇到了这个问题。也就是说，在HTML画布中使用“偶数”填充规则

在做了一点研究，浏览了邮件列表和补丁后，我注意到，事实证明，Firefox和Chrome的最新版本都支持这一点，但每个版本都有不同的、特定于浏览器的方式

在Firefox中，这是一个使用的问题。例如：

//
// 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 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');

在Chrome中，可以通过将字符串evenodd作为参数传递给

fill

方法来实现。例如：

//
// 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 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

attibute使用此功能，该功能现在是的一部分。

请参见：

fillRule可以是“非零”或“偶数奇”
---“非零”：非零绕组规则，这是默认规则。
---“偶数奇数”：偶数奇数缠绕规则

浏览器兼容性：
---IE 11+、Firefox 31+、Chrome都可以。
---我没有在IE 9/10上进行测试。
---使用

ctx.mozzillrule='evenodd'使用旧的Firefox 30/30-