为什么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

它看起来像anti-aliasing，这是在较低分辨率下表示高分辨率图像时最小化称为混叠的失真伪像的技术。由于圆形是高分辨率直到绘制，你将获得这些出血效果。

Answer 3

我没有太多搞乱画布，但我认为问题的出现与它在Photoshop中的原因相同。

绘制圆形时，必须进行抗锯齿处理，以防止出现锯齿状边缘。这意味着你最终会在圆圈周围形成不同程度的半透明像素，以达到平滑度。

当您使用相同的位置和尺寸在圆形顶部上方绘画时，它实际上是在已经半透明的像素上绘制半透明像素，为您留下一个接近原始颜色的像素环（但是稍微轻一些）。这就是为什么你绘制白色圆圈越多，它就越接近完全白色的块。