为什么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版本上运行时会留下幽灵般的界限.

你只需在它上面涂上一个完全不透明的白色矩形.由于矩形没有弯曲边缘,因此每个像素将完全涂成白色或不受影响 - 您将无法获得抗锯齿效果.