在画布元素中使用 SVG evenodd 填充规则答案

【问题标题】：Using the SVG evenodd fill-rule in the canvas element在画布元素中使用 SVG evenodd 填充规则
【发布时间】：2010-11-21 21:37:27
【问题描述】：

有谁知道是否有可能在 HTML5 画布元素中实现来自 SVG 的 evenodd fill-rule，无论是原生的还是数学的？指向执行此操作的项目的链接会有所帮助。

【问题讨论】：

标签： javascript canvas svg

【解决方案1】：

是的，globalCompositeOperation 应该可以。如果我没记错的话，默认的“source-over”值应该对应于 SVG 的“evenodd”（否则，尝试其他几个，看看结果图像是否相同）。

【讨论】：

如果您要绘制多个形状，则此方法有效。但是，如果您正在绘制一条路径，则不会。还有其他想法吗？
复合！= 填充。它们是不同的概念。全局复合操作设置不应对填充规则产生任何影响

【解决方案2】：

从数学上讲，您是指算法实现吗？这当然是可能的，请参阅http://gpolo.awardspace.info/fill/main.html。它更像是一个演示，但它“从数学上”解决了这个问题。

【讨论】：

【解决方案3】：

我问了自己同样的问题，然后遇到了this Mozilla Bugreport。

似乎它是由错误报告者向 WHATWG（画布规范）提出的：

克里斯·琼斯，2011-06-10：

让我们等待文档，直到这个规范在 whatwg 上看起来很可靠（我今天会发布）。

【讨论】：

【解决方案4】：

这是一个非常老的问题，所以当时情况肯定有所不同，但从很久以前开始，您可以将fillrule 参数传递给fill() 方法。这个fillrule 可以是默认的"nonzero"，也可以是"evenodd"。

var ctx = c.getContext('2d');
drawPath();
ctx.fill();
ctx.translate(70, 0);
drawPath();
ctx.fill('evenodd');
ctx.translate(70, 0);
drawPath();
ctx.stroke();

function drawPath(){
  ctx.beginPath();
  ctx.arc(30,30,20,0,Math.PI*2);
  ctx.lineTo(60,60);
  ctx.lineTo(0,0);
  ctx.closePath();
}

&lt;canvas id="c"&gt;&lt;/canvas&gt;

【讨论】：