javascript - 我的 HTML5 Canvas 未清除 - 不涉及任何路径

Question

我在开发的游戏中遇到了一个问题，其中 Canvas 未清除，尽管正在调用该函数以清除该特定上下文。

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

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

我用 Canvas 的宽度和高度的硬编码数字进行了尝试，得到了相同的结果。

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

我收到“CLEARING contextBack”控制台日志，因此我知道正在传递正确的上下文。然而，上下文并不清楚。

感谢任何能为我提供或指出解决方案的人。

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

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

Answer 1

从评论中给定的 Fiddle 来看，问题似乎是您没有清除 contextBug Canvas ，而只是清除了 backCanvas。确保清除这两个(或其中一个或取决于您的程序的工作方式):

function update() { 

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

Fiddle Example