如何从目的地中删除剩菜？答案

【问题标题】：How to remove left-overs from destination-out?如何从目的地中删除剩菜？
【发布时间】：2011-12-08 10:29:29
【问题描述】：

当绘制路径，然后绘制与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 中都会发生。

我可以做些什么来删除它们（或使它们不出现），如果没有，那么这是否会发生？

【问题讨论】：

标签： javascript firefox google-chrome html5-canvas antialiasing

【解决方案1】：

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

所以如果 a 介于 0% 和 100% 之间，那么在 a = 50% 时，最终不透明度的最大值将为 25%。

所以这些工件是预期的。

但是，如果您要再次删除具有相同不透明度的像素 n 次，那么最终的不透明度将是 (a * (1 - a)ⁿ)，其最大值会不断减小。所以继续用destination-out 绘制足够的时间可能会删除所有的工件。我觉得8次就够了。试试看：http://jsfiddle.net/dXVR7/

【讨论】：

谢谢，但为什么不能是a - a？因为我要求删除我已经绘制的相同 alpha 值。还是destination-out的工作原理？
这就是它的工作原理。如果你将 50% 添加到某个东西上，那么你会从中删除 50% 的内容，那么你就剩下 25% 的内容了。