Question

有没有人知道在HTML5 canvas元素中是否可以使用JavaScript本地或数学来实现SVG中的evenodd fill-rule？这样做的项目链接会很有帮助。

Answer 1

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

Answer 2

通过数学方法，您的意思是算法实现吗？当然可以，见http://gpolo.awardspace.info/fill/main.html。它不仅仅是一个演示，而是“以数学方式”解决了这个问题。

Answer 3

我问自己同样的问题并遇到了this Mozilla Bugreport。

似乎它被bug报告者提交给了WHATWG（画布规格）：

Chris Jones，2011-06-10：

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

Answer 4

这是一个非常古老的问题，所以事情当时一定是不同的，但是很久以前，你可以将fillrule参数传递给fill()方法。此fillrule可以是"nonzero"，默认值，也可以是"evenodd"。

＆＃13;

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

＆＃13;

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

＆＃13;

在canvas元素中使用SVG evenodd fill-rule

4 个答案: