javascript drawImage()问题

Question

目前drawImage();有一些问题。也就是说，它实际上不会画。我在fillRect();中试用了它，它也能工作，还可以将drawImage();放在onload函数中(这是有效的)。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 400;
document.body.appendChild(canvas);

var tileArray = [
[0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,1,1,1,1,0,0,1,0,0,0],
[0,0,0,1,1,1,1,0,1,1,1,0,0],
[0,0,0,1,1,1,0,0,0,0,1,1,0],
[0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,1,1,1,0,0,0,0,0,0,0],
[0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,1,1,1,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0]
];

var grassReady = false;
var grass = new Image();
grass.onload = function() {
        grassReady = true;
};
grass.src = "images/grass.png";

var sandReady = false;
var sand = new Image();
sand.onload = function() {
    sandReady = true;
};
sand.src = "images/sand.png";

var posX = 0;
var posY = 0;

if(grassReady) {
    ctx.drawImage(grass, posX, posY);
}

任何关于为什么要这样做的建议都会受到极大的赞赏，如果在任何情况下都搞砸了代码部分，我会事先提出建议。我看过其他类似的帖子，却找不到一个似乎可行的解决方案。

Answer 1

正如@Suman正确地说的那样，在drawImage中使用映像之前，您必须等待加载它们。

演示：http://jsfiddle.net/m1erickson/jGPGj/

​

​

下面是一个图像加载器，它预加载所有图像，然后调用start()函数，在这里您可以使用drawImage，因为所有图像都是完全加载的。

var imageURLs=[];  // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("images/grass.png");
imageURLs.push("images/sand.png");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

    // grass.png is in imgs[0]
    // sand.png is in imgs[1]

}

Answer 2

这个语句ctx.drawImage();应该在grass.onload = function() {}函数中，类似于

grass.onload = function() {
     ctx.drawImage(grass, posX, posY);
}

如果在drawImage()函数之外定义了grass.onload()，那么该状态将首先执行，因此在这一点上grassReady是假的，因此不满足条件。

从根本上讲，它与异步概念有关。

您的代码正在按顺序运行。

1)第一

var grassReady = false;

if(grassReady) {
    //grassReady is false, this condition is not satisfied
    ctx.drawImage(grass, posX, posY);
}

2)第二

grass.onload = function() {
     grassReady = true;
};