JavaScript 无法执行“drawImage" [英] JavaScript Failed to execute 'drawImage'

问题描述

好的，我正在使用 JavaScript Canvas Elements 等创建游戏.我已经能够加载成吨的图像，但在少数情况下，JavaScript 回复错误，例如

Ok so I'm creating a game with JavaScript Canvas Elements and such. I've been able to load in TONS of Images, but on a select few, JavaScript replies with Errors such as

未捕获的类型错误:无法在CanvasRenderingContext2D"上执行drawImage":找不到与提供的签名匹配的函数.

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided.

这完全没有意义，因为相同的代码在其他地方也能运行！?！

Which makes NO SENSE at all, because the same code works in other places!?!

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

Here is an example I have in my code:

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

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

Inside of an objects method, Player.die(), respectively.

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

Does anyone know why this behaviour is coming about? I'm getting very frustrated about it...

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

Here is a JSFiddle to demonstrate, alonside all the code. Player.die() is located on line[242].

推荐答案

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

The problem was the way that I was loading my Images, I should've been doing:

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

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

But instead I was get the elements by id from the document page.

资源:

图片加载说明

html如何加载图片的说明

这篇关于JavaScript 无法执行“drawImage"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！