Question

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

未捕获的TypeError：无法在'CanvasRenderingContext2D'上执行'drawImage'：找不到与提供的签名匹配的函数。

这完全没有任何感觉，因为相同的代码可以在其他地方使用！？！

以下是我的代码中的示例：

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

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

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

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

Answer 1

问题是我加载图片的方式，我应该这样做：

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

但我是从document页面获取id的元素。

资源：

Explanation on loading images

Explanation on how html loads images

Answer 2

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

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

Answer 3

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

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

JavaScript无法执行'drawImage'

3 个答案: