javascript - HTML5 Canvas 图像在 chrome 中不可见

Question

我正在使用 HTML5 canvas 并将两张图片放在那里，但我面临一个问题，即一张图片已加载并在 chrome 中可见，但另一张图片仅在 mozilla 中可见，但在刷新后。我不知道为什么会这样，因为我是 canvas 的新手。

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事件是异步的，确保在 base-image

的 onload-handler 中设置了 play-button

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>