Javascript HTML canvas fillrect使用了错误的颜色

我想用html画布实现一个简单的蛇游戏。 我使用这段代码使蛇移动（使尾巴变白，并为我之前计算的头部、顶部、左侧、wid和hid绘制新的矩形）：

其中coef[2]是我前面定义的某种颜色。 一切正常，但蛇的尾巴不是白色的（coef[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));
}

这将解决平滑边缘的问题。但这并不完美

---

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

如果我理解你在这里做什么，你是在试图绘制旧部分，以便“删除”过去的位置

---

这似乎几乎是一个定义。清除旧框架，绘制新框架。你就是这样做的。

你试图用白色覆盖之前蓝色的部分吗？@CodeiSir，是的，我想让它们“完全”变白最后一段是正确的答案。该代码只适用于矩形，即使这样，您也应该使用

clearRect

（使用透明而不是白色）。此外，如果设置了剪辑，这可能会中断。如果在白色中执行“fillRect（0,0，canvas.width，canvas.height）”，则不需要

clearRect

，如果画布不在白色背景上，则不需要。JSFIDLE已经更新，或者我切换到Firefox影响了更改，但是结果窗口现在是浅灰色而不是白色。在这种情况下，这条蛇会留下痕迹。@JanDvorak我不明白？画布默认是透明的，不是白色的。尝试在非白色元素上显示画布。为文档体提供CSS渐变背景将很好地演示这种差异。

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));
}