javascript - 为什么 Canvas 无法正确渲染？

Question

我对使用 HTML5 制作游戏相当熟悉 <canvas>标签。当我尝试从 Komodo Edit 9 运行我的游戏时，它运行得很好。

但是，当我尝试将游戏上传到任何网络托管服务时，它永远无法正常工作。就像下面的 garridpunching.neocities.org 一样。

问题是，一旦 Canvas 渲染，所有内容都会出现一瞬间，然后立即消失，只留下空白的黑色 Canvas 。

对于我尝试过的所有五个主机，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); 行上抛出错误，当我直接从本地主机运行 html 文件时，它工作得很好。

这是什么意思以及如何解决它？提前致谢。

Answer 1

这可能与 img 未正确加载有关。检查图像的路径，也许您在部署到托管服务时没有复制其中一些图像，因为您的某个路径在本地计算机上有效，但在远程站点上无效。

另外:您是否从与js相同的域加载所有图像？如果不是这种情况，也可能由 Cross-Origin Resource Sharing (CORS) 触发。问题。