Question

我正在尝试制作一个简单的泡泡弹出游戏，但我希望在画布的背景上显示不同的图像，它有时会起作用，但有时候它不会出现......显示图像我有以下......

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);
    }
}

以下是游戏的链接...... Bubble Popping

任何帮助将不胜感激！并提前感谢...

Answer 1

我不能在本地复制它，但如果你说它只是定期失败然后给出你发布的代码，我倾向于建议它与图像没有完成加载之前传递到canvas （产生空白图像）。

您可以尝试在图片中添加onload回调：

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

你试图在你给它们加载时间之前绘制你的图像。

演示：http://jsfiddle.net/m1erickson/6d5M4/

这是一个图像加载器，可以预加载所有图像，以便在需要时可用：

// 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

原因是您尝试绘制图像时图像尚未完成加载，因为图像加载是异步的。

对于单个图像，您只需在图像上为onload添加事件处理程序。

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

在您的代码中：

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";
    }
}

如果您需要加载多个图像，例如YAIL，我建议使用加载程序。

只需设置您的装载机：

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

当图像加载后，它将从你继续游戏的地方调用doneFunction，绘制图像等。

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

可以像您一样提前制作网址列表，然后在完成后将它们交给加载程序。

免责声明：我是YAIL的作者。 YAIL是免费的开源（MIT许可证）。请参阅上面的链接以获取文档/更多信息

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

3 个答案: