為什么畫布無法正確渲染？

Question

我對使用HTML5 <canvas>標簽制作游戲非常熟悉。 當我嘗試從Komodo Edit 9運行游戲時，它可以完美運行。

但是，當我嘗試將游戲上傳到任何網絡托管服務時，它永遠無法正常運行。 像下面的garridpunching.neocities.org。

問題在於，畫布渲染后，所有內容都會出現一秒鍾，然后立即消失，僅留下一塊空白的黑色畫布。

Google調試器針對我嘗試的所有五個托管服務器返回以下錯誤： Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

該錯誤引發在ctx.drawImage(sprite.cursor, cursor.x, cursor.y, 40, 40); ，當我直接從localhost運行html文件時，該方法非常有效。

這是什么意思，我該如何解決？ 提前致謝。

Answer 1

這可能與img無法正確加載有關。 檢查圖像的路徑，也許在部署到托管服務時您沒有復制其中的某些路徑，但是您的路徑在本地計算機上有效，但在遠程站點上無效。

另外：您是否從與js相同的域中加載所有圖像？ 如果不是這種情況，也可能由跨域資源共享（CORS）問題觸發。

Answer 2

這可能是因為您正在調用step ，即在加載所有圖像之前開始“游戲”。 解決的辦法是在調用step之前等待sprite的圖像加載。

load();
window.onload = step; // may need inline .onload() calls on sprite's imgs

之所以不會在本地發生，是因為它會立即加載請求的圖像，因為它無需下載圖像或類似的東西。