在HTML画布上使用偶数填充

Question

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

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

一种选择是使用SVG并在画布上绘制SVG,但我也发现原生SVG渲染在iPad上有点慢,但即使我在HTML画布上(在iPad上)绘制它也是SVG很慢？

提前致谢

Answer 1

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

经过一些研究,并通过邮件列表和补丁,我注意到,事实证明,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标准的attibute 使用此功能.