为什么我的图像不显示在画布上？

Question

I'm trying to make a simple bubble popping game, but I want a different image to show on the background of the canvas, it works sometimes but other times it just won't appear... to show the image I have the following...

function theWeather(weather) {
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    weather = "Rain";
    theImg(weather,ctx,c);
}

function theImg (weather,ctx,c) {
    var bg = new Image();
    if (weather === "Rain" || weather === "rain") {
        bg.src = "http://lukebarrier.co.uk/LukesPria/img/rain.jpg";
        ctx.drawImage(bg, 0, 0);
    } else if (weather === "Clouds" || weather === "clouds") {
        bg.src = "http://lukebarrier.co.uk/LukesPria/img/cloud.png";
        ctx.drawImage(bg, 0, 0);
    } else if (weather === "Clear" || weather === "clear") {
        bg.src = "http://lukebarrier.co.uk/LukesPria/img/sun.png";
        ctx.drawImage(bg, 0, 0);
    }
}

Here is a link to the game as it is... Bubble Popping

Any help would be appreciated! and thanks in advance...

Answer 1

I can't replicate it locally but if you are saying it is only failing periodically then given the code you've posted I'd be inclined to suggest that it's related to the image not having finished loading before being passed to the canvas (resulting in a blank image) .

You could try adding an onload callback to the image:

function theImg (weather,ctx,c) {
    var url = 'http://lukebarrier.co.uk/LukesPria/img/', 
        bg = new Image();

    bg.onload = function(){
        ctx.drawImage(this, 0, 0);
    }

    switch(weather.toLowerCase()){
        case 'rain': 
            bg.src = url+'rain.jpg'; break;
        case 'clouds':
            bg.src = url+'clouds.jpg'; break;
        case 'clear':
            bg.src = url+'clear.jpg'; break;
    }
}

Answer 2

You are trying to drawImage your images before you've given them time to load.

Demo: http://jsfiddle.net/m1erickson/6d5M4/

Here's an imageloader that preloads all your images so that they are available when needed:

// image loader

var imageURLs=[];  // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("yourImage1.png");
imageURLs.push("yourImage2.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[]

}

Answer 3

The reason is that your image(s) hasn't finished loading at the time you try to draw them as image loading is asynchronous.

For a single image you can simply add an event handler for the onload on the image.

...
img.onload = function(e) {
    ctx.drawImage(this, 0, 0);
    /// continue game from here
}
img.src = '...';   /// set src last

In your code:

function theWeather(weather) {
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    weather = "Rain";
    theImg(weather,ctx,c, startDraw);  /// add a callback here
}

function startDraw() {
    ctx.drawImage(this, 0, 0);
    /// continue game here
}    

function theImg (weather,ctx,c, callback) {
    var bg = new Image();
    bg.onload = callback;

    if (weather === "Rain" || weather === "rain") {
        bg.src = "http://lukebarrier.co.uk/LukesPria/img/rain.jpg";
    } else if (weather === "Clouds" || weather === "clouds") {
        bg.src = "http://lukebarrier.co.uk/LukesPria/img/cloud.png";
    } else if (weather === "Clear" || weather === "clear") {
        bg.src = "http://lukebarrier.co.uk/LukesPria/img/sun.png";
    }
}

I would recommend using a loader if you need to load several images such as YAIL .

Simply set up your loader like this:

var loader = (new YAIL({
    done    : doneFunction,
    urls    : [url1, url2, url3]
})).load();

When the images has loaded it will then call doneFunction from where you continue your game, drawing of the images etc.:

function doneFunction(e) {
    ctx.drawImage(e.images[0], 0, 0);  /// for example
}

The url list can be made in advance as you do, then just hand them to the loader when done.

Disclaimer: I am the author of YAIL. YAIL is free open-source (MIT license). Please see link above for docs/more info