HTML5画布图像在Chrome中不可见

Question

我正在使用HTML5画布并在那里放置两个图像，但我面临的一个问题是，一个图像加载并在Chrome中可见，但另一个图像仅在Mozilla中可见但在刷新后可见。我不知道为什么会发生这种情况，因为我是新手。

var canvas = document.getElementById('canvas'); 
 
var context = canvas.getContext('2d'); 
 
var x = 0; 
 
var y = 0; 
 
var width = 900; 
 
var height = 700; 
 
var imageObj = new Image(); 
 
imageObj.onload = function() { 
 
    context.drawImage(imageObj, x, y, width, height); 
 
}; 
 
imageObj.src = 'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg'; 
 

 
var startImageObj = new Image(); 
 
startImageObj.onload = function() { 
 
    context.drawImage(startImageObj, (canvas.width-startImageObj.width)/2, (canvas.height-startImageObj.height)/2) 
 
}; 
 
startImageObj.src = 'http://assets.halfbrick.com/yc/v3/images/button-play.png';

<canvas id="canvas" width="900" height="700"></canvas>

fiddle

Answer 1

由于onload事件是异步的，确保play-button中的base-image

var canvas = document.getElementById('canvas'); 
 
var context = canvas.getContext('2d'); 
 
var x = 0; 
 
var y = 0; 
 
var width = 900; 
 
var height = 700; 
 
var imageObj = new Image(); 
 
imageObj.onload = function() { 
 
    context.drawImage(imageObj, x, y, width, height); 
 
    var startImageObj = new Image(); 
 
    startImageObj.onload = function() { 
 
    context.drawImage(startImageObj, (canvas.width - startImageObj.width)/2, (canvas.height - startImageObj.height)/2) 
 
    }; 
 
    startImageObj.src = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5670-200.png'; 
 
}; 
 
imageObj.src = 'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg';

<canvas id="canvas" width="900" height="700"></canvas>

的 onload-handler被设置

Answer 2

@ Rayon的回答是正确的，因为在你目前的实现中，你无法知道哪个图像将首先加载，但IMO将相同回调中的所有内容都包装起来是错误的，因为你必须等待第一个图像已经加载之前触发下一个加载，这将产生最后一个图像的闪烁幻象。

取而代之的是，创建一个预加载函数，当两个图像都被加载时，将触发绘图函数。

这样的优点，使其更容易在以后打电话给你的绘图功能，也让你的代码有点清洁：

/* preloader 
 
    inputs : 
 
    an array containing the urls of the images to load, 
 
\t a callback function called when all the images have loaded \t 
 
    outputs: 
 
    an array containing all the image elements in the same order has the urls where provided \t 
 
*/ 
 
function preloader(imageURLs, callback) { 
 

 
    var toLoad = imageURLs.length, 
 
    toReturn = [], 
 
    decrement = function() { 
 
     if (--toLoad <= 0) { 
 
     callback(); 
 
     } 
 
    }; 
 

 
    imageURLs.forEach(function(url) { 
 
    var img = new Image() 
 
     // you may want to include a more verbose error function 
 
    img.onload = img.onerror = decrement; 
 
    img.src = url; 
 
    toReturn.push(img); 
 
    }); 
 

 
    return toReturn; 
 
} 
 

 
function draw() { 
 
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height); 
 
    ctx.drawImage(front, (canvas.width - front.width)/2, (canvas.height - front.height)/2); 
 
} 
 

 
var ctx = canvas.getContext('2d'), 
 
    urls = [ 
 
    'http://img13.deviantart.net/1550/i/2011/353/4/2/mobile_game_background_by_disnie-d4jmr8r.jpg', 
 
    'https://d30y9cdsu7xlg0.cloudfront.net/png/5670-200.png' 
 
    ], 
 
    images = preloader(urls, draw), 
 
    background = images[0], 
 
    front = images[1];

<canvas id="canvas" width="900" height="700"></canvas>