我的 HTML5 画布未清除 - 不涉及任何路径答案

【问题标题】：My HTML5 canvas isn't clearing - no paths are involved我的 HTML5 画布未清除 - 不涉及任何路径
【发布时间】：2015-06-25 00:43:12
【问题描述】：

我在开发的游戏中遇到了一个问题，其中画布没有被清除，尽管正在调用该函数来清除特定的上下文。

我正在从左向右移动一个对象，为此我运行以下代码：

onKeyboardKeyDown(){
    canUpdateBack = true;
    drawX++;
}

onKeyboardKeyUp(){
    canUpdateBack = false;
}

if (canUpdateBack) {
    console.log("CLEARING contextBack");
    contextBack.clearRect(0, 0, canvasBack.width, canvasBack.height);
    contextBack.drawImage(img, drawX, 0, img.naturalWidth, img.naturalHeight);
}

我已经用硬编码的数字来表示画布的宽度和高度，并得到了相同的结果。

我知道这是可行的，因为当我按下一个键时我可以看到 boxObj 在画布上移动，canUpdateBack 设置为 true。它仅在“keyup”事件中设置为 false，以便我仅在移动 boxObj 时清除/绘制画布。

我正在获取“CLEARING contextBack”控制台日志，因此我知道正在传递正确的上下文。但是，上下文根本没有清除。

感谢任何可以提供或指出解决方案的人。

我相信我没有使用任何转换。我正在通过按键更新的 X 坐标绘制图像。还是那些仍然被认为是变换，我说“在那边画画”？

我在 Chrome 中发现了该错误，但无法在移动设备、Safari 或 Firefox 上复制。看起来完全有可能是 Chrome 的错误。

【问题讨论】：

如果您使用fillRect 而不是clearRect 会发生什么？你得到一个纯色矩形吗？
您是否在在之后绘制您调用clearRect() 的框？如果您正在清除屏幕，请确保您最后一次完成，否则您只会在刚刚清除的内容上绘制。
如果我使用 fillRect() 我会得到一个实心矩形并且仍然可以看到以前的图像。是的，我在清除后绘制我的盒子，因为如果我在绘制后清除，那么我只是清除了我绘制的内容。我将画布清除为空白，然后应用我的下一张图片。
您需要更具体地说明您想做什么。我们看不到您的任何代码，并且您没有准确地告诉我们问题（我们不知道您的程序应该如何工作）。也许你应该给我们一个小提琴来证明你的问题？
这是一个 Fiddle 来说明问题jsfiddle.net/f85vp6g4/1

标签： javascript html canvas html5-canvas

【解决方案1】：

从您在 cmets 中给定的 Fiddle 看来，问题似乎是您没有清除 contextBug 画布而只是清除了 backCanvas。确保您清除它们（或其中一个或取决于您的程序的工作方式）：

function update() { 

    contextBack.clearRect(0, 0, canvasBack.width, canvasBack.height);
    contextBug.clearRect(0, 0, canvasBug.width, canvasBug.height);    
    moveObj(boxItem);
    ...
}

Fiddle Example

【讨论】：