JavaScript 无法执行“drawImage”答案

【问题标题】：JavaScript Failed to execute 'drawImage'JavaScript 无法执行“drawImage”
【发布时间】：2014-04-21 06:13:50
【问题描述】：

好的，我正在使用 JavaScript Canvas Elements 等创建游戏。我已经能够加载大量图像，但在少数几个中，JavaScript 会回复错误，例如

未捕获的类型错误：无法在“CanvasRenderingContext2D”上执行“drawImage”：未找到与提供的签名匹配的函数。

这根本没有意义，因为相同的代码在其他地方也有效！？！

这是我的代码中的一个示例：

board.drawImage(document.getElementById("player_explode"), this.x, this.y);

在对象方法内部，分别为Player.die()。

有谁知道为什么会出现这种行为？我对此感到非常沮丧......

这里有一个JSFiddle 来演示，除了所有代码。 Player.die() 位于line[242]。

【问题讨论】：

在尝试绘制之前，您是否检查过所有图像元素是否已完成加载？
@kybernetikos 好吧，我刚刚对其进行了编辑，以便图像在.html 中都可见，但由于某种原因，它也没有出现在那里。可以在.html 文件中加载的<img> 数量是否有限制？您可以在此处查看所有加载的图像：JSFiddle
我收到此错误是因为我试图加载损坏的图像。

标签： javascript animation canvas drawimage

【解决方案1】：

对于 2021 年学习 React 的人，您必须在 img.onload 中调用 context.drawImage()，否则画布上将不会显示任何内容！这是一个真实的工作示例：

useEffect(() => {
    canvasRef.current.width = mapXYWH.w * UNIT
    canvasRef.current.height = mapXYWH.h * UNIT
    const context = canvasRef.current.getContext("2d")

    map.map(o => {
        const img = new Image(o.width*UNIT,o.height*UNIT)
        img.src = o.normal
        img.onload = () =>
            context.drawImage(img, (o.x-mapXYWH.x)*UNIT, (o.y-mapXYWH.y)*UNIT)
    })
}, [map, mapXYWH])

另请参阅：React -- Canvas Won't Draw Image

【讨论】：

【解决方案2】：

你应该等待所有元素加载，所以这样做：

window.onload=function(){
       board.drawImage(document.getElementById("player_explode"), this.x, this.y);
}

【讨论】：

【解决方案3】：

问题在于我加载图像的方式，我应该这样做：

var image = new Image();
image.src = "imagesource.jpg";

但相反，我是从document 页面通过 id 获取元素。

资源：

Explanation on loading images

Explanation on how html loads images

【讨论】：