我收到以下错误：
未捕获的TypeError：无法执行＆＃39; drawImage＆＃39; on＆＃39; CanvasRenderingContext2D＆＃39;：提供的值不是＆＃39;（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）＆＃39;
我在这里看到了同样的错误，但实施与地雷不同。这是一个游戏，它渲染一些图像，但仍然给出了这个错误。这是我的代码：
这是chrome说明错误的行：
for (row = 0; row < numRows; row++) {
for (col = 0; col < numCols; col++) {
/* The drawImage function of the canvas' context element
* requires 3 parameters: the image to draw, the x coordinate
* to start drawing and the y coordinate to start drawing.
* We're using our Resources helpers to refer to our images
* so that we get the benefits of caching these images, since
* we're using them over and over.
*/
ctx.drawImage(resources.get(rowImages[row]), col * 101, row * 83);
}
}
它是ctx.drawImage(resources.get(rowImages[row]), col * 101, row * 83)。
这是完整的功能render()。图像包含在以下数组中：
function render() {
/* This array holds the relative URL to the image used
* for that particular row of the game level.
*/
var rowImages = [
'images/water-block.png', // Top row is water
'images/stone-block.png', // Row 1 of 3 of stone
'images/stone-block.png', // Row 2 of 3 of stone
'images/stone-block.png', // Row 3 of 3 of stone
'images/grass-block.png', // Row 1 of 2 of grass
'images/grass-block.png' // Row 2 of 2 of grass
],
numRows = 6,
numCols = 5,
row, col;
/* Loop through the number of rows and columns we've defined above
* and, using the rowImages array, draw the correct image for that
* portion of the "grid"
*/
for (row = 0; row < numRows; row++) {
for (col = 0; col < numCols; col++) {
/* The drawImage function of the canvas' context element
* requires 3 parameters: the image to draw, the x coordinate
* to start drawing and the y coordinate to start drawing.
* We're using our Resources helpers to refer to our images
* so that we get the benefits of caching these images, since
* we're using them over and over.
*/
ctx.drawImage(resources.get(rowImages[row]), col * 101, row * 83);
}
}
renderEntities();
} //END RENDER
resources是一个单独的文件resources.js，它为图像创建一个缓存，如果有帮助，代码如下：
(function() {
var resourceCache = {};
var loading = [];
var readyCallbacks = [];
/* This is the publicly accessible image loading function. It accepts
* an array of strings pointing to image files or a string for a single
* image. It will then call our private image loading function accordingly.
*/
function load(urlOrArr) {
if(urlOrArr instanceof Array) {
/* If the developer passed in an array of images
* loop through each value and call our image
* loader on that image file
*/
urlOrArr.forEach(function(url) {
_load(url);
});
} else {
/* The developer did not pass an array to this function,
* assume the value is a string and call our image loader
* directly.
*/
_load(urlOrArr);
}
}
/* This is our private image loader function, it is
* called by the public image loader function.
*/
function _load(url) {
if(resourceCache[url]) {
/* If this URL has been previously loaded it will exist within
* our resourceCache array. Just return that image rather than
* re-loading the image.
*/
return resourceCache[url];
} else {
/* This URL has not been previously loaded and is not present
* within our cache; we'll need to load this image.
*/
var img = new Image();
img.src = url;
img.onload = function() {
/* Once our image has properly loaded, add it to our cache
* so that we can simply return this image if the developer
* attempts to load this file in the future.
*/
resourceCache[url] = img;
/* Once the image is actually loaded and properly cached,
* call all of the onReady() callbacks we have defined.
*/
if(isReady()) {
readyCallbacks.forEach(function(func) { func(); });
}
};
/* Set the initial cache value to false, this will change when
* the image's onload event handler is called. Finally, point
* the images src attribute to the passed in URL.
*/
resourceCache[url] = false;
}
}
function get(url) {
return resourceCache[url];
}
/* This function determines if all of the images that have been requested
* for loading have in fact been completly loaded.
*/
function isReady() {
var ready = true;
for(var k in resourceCache) {
if(resourceCache.hasOwnProperty(k) &&
!resourceCache[k]) {
ready = false;
}
}
return ready;
}
/* This function will add a function to the callback stack that is called
* when all requested images are properly loaded.
*/
function onReady(func) {
readyCallbacks.push(func);
}
/* This object defines the publicly accessible functions available to
* developers by creating a global Resources object.
*/
window.resources = {
load: load,
get: get,
onReady: onReady,
isReady: isReady
};
})();
Chrome还列出了同一错误下的其他两个部分：
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
//Request to do this again ASAP
requestAnimationFrame(main);
}
错误发生在渲染调用render（）;
上并在我的文件的最后一行调用main（），如下所示：
// Let's play this game!
var then = Date.now();
reset();
main();
答案 0 :(得分：2)
你有一个加载，onready，回调机制看起来像。
所以我会做一个主要功能来启动所有：
assets = ['images/water-block.png',
'images/stone-block.png',
'images/grass-block.png'
];
var then = Date.now();
reset();
resources.onReady(main);
resources.load(assets);
即使resources.get()会继续加载图像，这本质上是异步的，你仍然会有错误，因为drawimage期望资源在那里，不会被加载然后被绘制。