如何清除目的地输出中的剩余内容？
当绘制一条路径，然后使用 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 中都会发生这种情况。
我可以做些什么来删除它们（或让它们不出现），如果没有，那么这是否会发生？
When drawing a path and then drawing exactly the same path with globalCompositeOperation = "destination-out" like this:
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);
Then there are leftovers on the anti-alised edges. This happens in both Firefox and Chrome.
Is there anything I can do to remove them(or make them not appear), and if not then is this expected to happen?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
假设必须使用 alpha 通道/不透明度 a 绘制一个抗锯齿像素，然后删除具有相同不透明度的该像素，则绘制后的最终不透明度将为 (a em> * (1 - a))。
因此，如果 a 介于 0% 和 100% 之间，则当 a = 50% 时，最终不透明度的最大值将为 25%。
因此这些伪影是预期的。
但是，如果您再次删除具有相同不透明度的像素 n 次，那么最终的不透明度将为 (a * (1 - a )n)，其最大值将不断减小。因此，继续使用
destination-out进行绘制足够多次可能会消除所有伪影。我觉得8次就够了。尝试一下：http://jsfiddle.net/dXVR7/Suppose one anti-aliased pixel has to be drawn with alpha channel / opacity of a, then you remove that pixel with the same opacity, then the final opacity after drawn will be (a * (1 - a)).
So if a is between or 0% and 100%, then the maximum value of final opacity will be 25% at a = 50%.
So these artifacts are expected.
But if you were to remove that pixel with same opacity again for n times, then the final opacity would be (a * (1 - a)n) and its maximum value will keep decreasing. So keep drawing with
destination-outenough times will probably remove all the artifacts. I think 8 times are enough. Try it: http://jsfiddle.net/dXVR7/