为什么我的图片没有在HTML5画布上绘制出来？

Question

我正在跟随教程设置我的代码...但当我运行它时，出现了错误消息：

"(index):18 Uncaught InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state."

这是我在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();

    }

我的目录结构如下所示 -

有任何想法为什么会这样吗？

- joe

---

提供的HTMLImageElement处于“broken”状态。 - CBroe

尝试了另一个文件，但是出现了相同的错误。 - joe

但是将<img src="images/cat1sprite.png">放入HTML代码中会显示图像...？ - CBroe

Answer 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';

此外，请确保查看控制台以获取错误信息（如果图像路径不正确）。

- XCS

---

@joe 你没有收到其他的错误吗？你确定这个错误不是在代码的其他位置触发的吗？你什么时候调用drawPlayer函数？ - XCS

在一个 setInterval 函数中 - joe

你是在图片加载完成后，在onload回调函数中创建时间间隔吗？ - XCS

我在画布上成功绘制了几次图像后才出现了这个问题，所以在我的情况下不是因为它还没有完成加载。 - Shavais

图片加载完成后，我也遇到了一个问题。我的代码特别检查img.complete，然后在绘制图像时出现了异常。这种情况只会偶尔发生。 - CpnCrunch

Answer 2

我认为问题出在 ctx.save(); ctx.restore(); 上，你不需要它们，可以像this tutorial中那样尝试不使用它们。同时，请检查图片的路径以及确保图片是正确的（可能你有一个名为.jpg的png文件或类似的情况）。

- wezzy

---

你检查过图片文件了吗？ - wezzy

喃喃自语，也许 Cristy 是对的，问题在于你试图在图像加载之前绘制它。 - wezzy