为什么 Canvas 会留下幽灵般的戒指？答案

【问题标题】：Why does Canvas leave a ghostly ring?为什么 Canvas 会留下幽灵般的戒指？
【发布时间】：2010-12-16 07:48:06
【问题描述】：

我正在尝试使用 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
    };

为什么canvas会留下这个Ghostly ring，我该如何摆脱它？

【问题讨论】：

flash 开发人员都知道画布出没了
简而言之，抗锯齿。该圆圈边缘上的像素正在以低于 100% 的不透明度进行绘制。这不是画布独有的。你只需要在上面画画。

标签： javascript html canvas

【解决方案1】：

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

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

【讨论】：

实际上，如果在non-pixel boundaries 上绘制矩形，您仍然可以看到抗锯齿问题。将一个区域划分为多个正方形或进行描边时，可能很容易发生这种情况。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我对画布的处理并不多，但我认为出现问题的原因与在 Photoshop 中的原因相同。

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

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

【讨论】：