为什么画布无法正确渲染？

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

之所以不会在本地发生，是因为它会立即加载请求的图像，因为它无需下载图像或类似的东西。