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

Question

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

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

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 会留下这个幽灵环，我该如何摆脱它？

Answer 1

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

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