HTML5 画布图像在 chrome 中不可见答案

【问题标题】：HTML5 canvas image is not visible in chromeHTML5 画布图像在 chrome 中不可见
【发布时间】：2016-08-16 06:11:00
【问题描述】：

我正在使用 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';

&lt;canvas id="canvas" width="900" height="700"&gt;&lt;/canvas&gt;

fiddle

【问题讨论】：

控制台有错误吗？
确保http://assets.halfbrick.com/yc/v3/images/button-play.png 未被您的网络提供商阻止。我在Network-Tab 中获得了200 Webcat Access denied 状态代码
@Rayon 不，我没有收到任何错误，并且图像没有被阻止，因为我能够打开这些图像。这些图像仅用于演示目的，我在我的系统中使用本地图像。
@Rayon 刷新页面，图片就会消失。
在 Firefox 中一切正常

标签： javascript css html canvas

【解决方案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';

&lt;canvas id="canvas" width="900" height="700"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

@Rayon 的答案是正确的，因为您当前的实现无法知道哪个图像将首先加载，但 IMO 将所有内容包装在同一个回调中是错误的，因为您将不得不等待第一张图像在触发加载下一张之前加载，这将产生最后一张图像的闪烁幻影。

相反，创建一个预加载器函数，该函数将在两个图像都已加载时触发绘图函数。

这样做的好处是以后调用你的绘图函数更容易，也让你的代码更简洁：

/* preloader
  inputs : 
    an array containing the urls of the images to load,
	a callback function called when all the images have loaded	
  outputs: 
    an array containing all the image elements in the same order has the urls where provided	
*/
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];

&lt;canvas id="canvas" width="900" height="700"&gt;&lt;/canvas&gt;

【讨论】：