javascript - 为什么Canvas留下幽灵般的戒指？

我正在尝试使用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 会留下这个幽灵般的戒指，我该如何摆脱它？

最佳答案

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

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