我的HTML5畫布沒有清除 - 沒有路徑參與

我遇到了一個遊戲問題，我正在開發一個畫布沒有清除的地方，雖然函數被調用來清除特定的上下文。我的HTML5畫布沒有清除 - 沒有路徑參與

我移動的物體由左到右，而這樣做我運行此代碼：

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的一個bug。

來源

2015-04-18 andrew

如果你使用'fillRect'而不是'clearRect'會發生什麼？你有一個純色矩形嗎？ –

你在*之後畫的那個盒子是否叫'clearRect（）'？如果你正在清理一個屏幕，確保你最後一次完成，否則你只會畫出你剛纔清除的內容。 –

如果我使用fillRect（）我得到一個堅實的矩形，仍然可以看到以前的圖像。是的，清理後我正在繪製我的盒子，因爲如果在繪製之後清除，我就清除了我繪製的東西。我將畫布清理成空白的石板，然後應用我的下一張圖像。 – andrew

從您提供的小提琴的評論中，它看起來像問題是你沒有清除contextBug畫布，只是清除backCanvas。確保你清楚他們兩個（或任一或取決於你的程序是如何工作的）：

function update() { 

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

Fiddle Example

來源

2015-04-18 02:37:06

我的HTML5畫布沒有清除 - 沒有路徑參與

回答

相關問題