在HTML画布上使用偶数填充

Question

是否有任何开源库（JaveScript）在画布上实现偶数填充规则。 如果我自己尝试实现它，那么它会有多复杂（考虑到具有复杂曲线的一般情况）并且它会影响性能（由于在JaveScript中为每个像素执行它的开销）。

将偶数奇数填充转换为非零绕组的方法有哪些（考虑到适用于所有情况的通用解决方案）。一旦我找到的方法是将形状分成所有非相交的多边形并分别填充它们。

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

提前致谢

Answer 1

我遇到了这个问题，因为我前段时间正在寻找同样的问题。也就是说，在HTML画布中使用“evenodd”填充规则。

经过一些研究，并通过邮件列表和补丁，我注意到，事实证明，Firefox和Chrome的最新版本都支持这一点，但每个版本都采用不同的浏览器特定方式。< / p>

在Firefox中，使用mozFillRule attribute是一个问题。例如：

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

这是我研究过的两个浏览器，所以我不知道其他浏览器的状态。希望在不久的将来，我们将能够通过现在属于HTML standard的fillRule地址来使用此功能。

Answer 2

请参阅fill() method API：

   void ctx.fill();
   void ctx.fill(fillRule);
   void ctx.fill(path, fillRule);

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

浏览器兼容性：
--- IE 11 +，Firefox 31 +，Chrome都可以 ---我没有在IE 9/10上测试 ---将ctx.mozFillRule = 'evenodd';与旧版Firefox 30/30一起使用 - 。