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

Question

有谁知道在HTML5 canvas元素中是否可以使用JavaScript本地或数学方式实现evenoddfill-rule？链接到这样做的项目将会有所帮助。

Answer 1

是的，应该可以用globalCompositeOperation。如果我没有弄错，默认的“source-over”值应该与SVG的“evenodd”相对应（否则，请尝试更少的人看看最终的图像是否相同）。

Answer 2

通过数学表达算法的实现吗？这当然是可能的，见http://gpolo.awardspace.info/fill/main.html。它比任何东西都更像是一个演示，但它可以“数学地”解决这个问题。

Answer 3

我问自己同样的问题，并碰到this Mozilla Bugreport。

似乎它得到由bugreporters提出了WHATWG（帆布规格）：

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

让我们等待，直到文档这个天赋是寻找固体上whatwg（我今天会发布）。

Answer 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(); 
 
}

<canvas id="c"></canvas>