为什么我的图像没有在 HTML5 画布上绘制？答案

【问题标题】：Why isn't my image being drawn on HTML5 canvas?为什么我的图像没有在 HTML5 画布上绘制？
【发布时间】：2016-04-10 21:22:52
【问题描述】：

我正在遵循教程并设置我的代码.. 但是当我运行它时，我会收到一条错误消息

"(index):18 Uncaught InvalidStateError: 无法在 'CanvasRenderingContext2D' 上执行 'drawImage': 提供的 HTMLImageElement 处于 'broken' 状态。"

这是我在 indexSoccer.html 文件中运行的代码，

    var ctx = document.getElementById("ctx").getContext("2d");

    var Img = {};
    Img.player = new Image();
    Img.player.src = 'images/cat1sprite.png';

    drawPlayer = function(player){
        ctx.save();
        var x = player.x;
        var y = player.y;
        ctx.drawImage(Img.player, x, y);
        ctx.restore();

    }

我的目录如下所示 -

任何想法为什么？

【问题讨论】：

“提供的 HTMLImageElement 处于“损坏”状态” – w3.org/TR/html5/embedded-content-0.html#img-error
尝试了不同的文件，同样的错误。
但是<img src="images/cat1sprite.png"> 放入 HTML 代码会显示图像...？

标签： javascript html image canvas sprite

【解决方案1】：

因为您尝试在加载之前绘制图像。

var Img = {};
Img.player = new Image();
Img.player.onload = function() {
  // Try to draw your image only after this function has been called.
  // eg: drawPlayer(Player1);
}
Img.player.src = 'images/cat1sprite.png';

另外，请务必查看控制台是否有错误（以防图像路径错误）。

【讨论】：

@joe 你没有得到任何其他erros？您确定错误没有在代码中的其他地方触发吗？什么时候调用drawPlayer函数？
在 setInterval 函数中
然后你在加载图像后创建间隔，在 onload 回调中，对吧？
我遇到了这个问题之后图像已经成功绘制到画布几次，所以在我的情况下，它并不是没有完成加载。

【解决方案2】：

我认为问题出在 ctx.save(); ctx.restore();您不需要它们，请尝试不使用它们，例如 this tutorial。还要检查图像的路径以及图像是否正确（也许你有一个名为 .jpg 的 png 或类似的东西）

【讨论】：

你检查过图片文件吗？
咕哝咕哝，也许 Cristy 是对的，问题是你试图在加载之前绘制图像