HTML canvas fillrect使用错误的颜色

Question

我想用html canvas实现一个简单的蛇游戏。 我使用这个代码来使蛇移动（使尾部变白并绘制新的矩形，用于头部，顶部，左边，wid和隐藏我之前计算过）：

        if (currentSnake.length == 45) {
            var tail = currentSnake.shift();
            ctx.fillStyle="white";
            ctx.fillRect(tail.left, tail.top, tail.wid, tail.hid);
        }
        currentSnake.push({top: top, left: left,wid: wid, hid: hid});

        ctx.fillStyle=coef[2];
        ctx.fillRect(left, top, wid, hid);

其中coef [2]是我之前定义的某种颜色。 一切都很好，但蛇的尾巴变得不是白色（coef [2]和白色之间的某种颜色混合）。 我怎么解决这个问题？

Answer 1

如果我了解你在这里所做的事情，你就会试图绘制旧的部分，以便去除＆＃34;删除＆＃34;过去的职位？

这似乎几乎是X Y problem的定义。清除旧框架，绘制新框架。这就是你如何做这件事。

Answer 2

尝试

if (currentSnake.length == 45) {
    var tail = currentSnake.shift();
    ctx.fillStyle = "white";
    ctx.fillRect(Math.floor(tail.left), Math.floor(tail.top), 
        Math.ceil(tail.wid), Math.ceil(tail.hid));
}

这应解决边缘光滑的问题。但它并不完美。

最好的解决方案是每次都用白色完全清除画布并重新绘制蛇的所有身体部位。