javascript - 如何从 destination-out 中删除剩菜？

Question

当绘制路径然后使用 globalCompositeOperation = "destination-out" 绘制完全相同的路径时，如下所示:

function drawPath(ctx){
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(120, 120);
  ctx.bezierCurveTo(30, 40, 30, 40, 40, 120);
  ctx.lineTo(0, 0);
  ctx.fill();
}

drawPath(ctx);
ctx.globalCompositeOperation = "destination-out";
drawPath(ctx);

然后在抗锯齿边缘上有残留物。这在 Firefox 和 Chrome 中都会发生。

我能做些什么来移除它们(或让它们不出现)，如果没有，那么这是否会发生？

Answer 1

假设必须使用 a 的 alpha channel /不透明度绘制一个抗锯齿像素，然后删除具有相同不透明度的像素，则绘制后的最终不透明度将为 ( a * (1 - a)).

因此，如果 a 介于 0% 和 100% 之间，则最终不透明度的最大值将为 25%，a = 50%。

所以这些伪像是预期的。

但是如果你要再次删除具有相同不透明度的像素 n 次，那么最终的不透明度将是 (a * (1 - a)ⁿ) 并且其最大值会不断减小。因此，继续使用 destination-out 进行绘制足够多次可能会移除所有伪影。我觉得8次就够了。试试看:http://jsfiddle.net/dXVR7/