HTML 画布填充矩形使用错误的颜色答案

【问题标题】：HTML canvas fillrect uses wrong colorHTML 画布填充矩形使用错误的颜色
【发布时间】：2015-12-26 21:56:26
【问题描述】：

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

        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] 和白色之间的某种颜色混合）。我该如何解决这个问题？

【问题讨论】：

你试图用白色覆盖之前蓝色的部分？
@CodeiSir，是的，我想让它们“完全”变白

标签： javascript html canvas

【解决方案1】：

如果我理解您在这里所做的事情，您是在尝试绘制 OVER 旧部分以“删除”过去的位置？

这似乎是X Y problem 的定义。清除旧框架，绘制新框架。这就是你做这种事情的方式。

【讨论】：

【解决方案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));
}

这应该可以解决平滑边缘的问题。但这并不完美。

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

【讨论】：

最后一段是正确答案。该代码仅适用于矩形，即使那样您也应该使用clearRect（使用透明而不是白色）。此外，如果设置了剪辑，这可能会中断。
如果你用白色做'fillRect(0,0,canvas.width,canvas.height)'，你就不需要clearRect
如果您的画布不在白色背景上，您可以这样做。要么 jsFiddle 已更新，要么我切换到 Firefox 影响了更改，但结果窗口现在是浅灰色而不是白色。在这种情况下，这条蛇会留下痕迹。
@JanDvorak 我不明白？
画布默认是透明的，不是白色的。尝试在非白色元素上显示画布。为文档正文提供 CSS 渐变背景将很好地展示差异。