为什么Canvas会留下幽灵般的光环？

Question

我正在尝试使用 Canvas，将不同颜色的标记放置在网格上，并尝试删除它们。

我目前正在尝试通过在令牌上用白色绘制一个尺寸完全相同的圆圈来删除令牌。这会在原始圆圈所在的位置留下一个“幽灵环”（单像素轮廓），随着连续应用白色圆圈而消失。

2, -1 中的圆是最初绘制的，根本没有过度绘制。 3, -1 中的圆已被覆盖一次，4, -1 中的圆已被覆盖两次，依此类推至 7, -1。

Chrome 和 Firefox 3.6 中都会出现此行为，

我的代码如下。

   function placeToken(e) {
        var click = getClick(e);

        var gridCord = getGridCord(click);

        var canvas = e.currentTarget;
        var ctx = canvas.getContext(CONTEXT_NAME);

        ctx.fillStyle = color;
        ctx.strokeStyle = color; //tried with and without this line, no effect

        x = (gridCord.x * spacing) + (spacing / 2);
        y = (gridCord.y * spacing) + (spacing / 2);


        ctx.beginPath();
        ctx.arc(x, y, (spacing - tokenEdge) / 2, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();  //tried with and without this line.  Same result
    };

为什么画布上会留下这个幽灵环，我该如何去除它？

Answer 1

简而言之，抗锯齿。该圆圈边缘的像素以低于 100% 的不透明度绘制。这并不是画布独有的。过去，在 Windows 图形 API 执行抗锯齿功能之前编写和测试的 Windows 应用程序在执行抗锯齿功能的 Windows 版本上运行时会留下幽灵般的边界。

您只需在其上绘制一个完全不透明的白色矩形即可。由于矩形没有弯曲的边缘，因此每个像素要么完全漆成白色，要么不受影响——您不会获得抗锯齿效果。

Answer 2

它看起来像抗锯齿，一种在表示时最小化失真伪影（称为锯齿）的技术较低分辨率的高分辨率图像。由于圆圈在绘制之前都是高分辨率的，因此您将获得这些出血效果。

Answer 3

我没有太多地弄乱画布，但我认为问题发生的原因与 Photoshop 中的原因相同。

绘制圆形时，必须对其进行抗锯齿处理，以防止锯齿状边缘可见。这意味着您最终会在圆周围得到不同程度的半透明像素，以实现平滑度。

当您使用相同的位置和尺寸在圆的顶部绘制时，它本质上是在已经半透明的像素之上绘制半透明像素，留下一圈接近原始颜色（但稍浅）的像素。这就是为什么绘制白色圆圈的次数越多，它就越接近全白块。