Question

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

我正在从左到右移动一个对象，为此我运行了这段代码：

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的错误。

Answer 1

从评论中给出的小提琴看，问题是你没有清除contextBug画布而只是清除backCanvas。确保你清除它们（或者任何一个或取决于程序的工作方式）：

function update() { 

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

Fiddle Example

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

1 个答案: