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>