HTML5画布图片在Chrome中不可见 [英] HTML5 canvas image is not visible in chrome

问题描述

我使用HTML5画布，并把两个图像，但我面临的一个问题是，一个图像加载和可见的铬，但另一个图像只有在莫泽拉可视，但刷新后。我不知道为什么会发生，因为我是新的在画布上。

  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 =canvaswidth =900height =700>< / canvas> ;  
 

小提琴

解决方案

@ Rayon的答案是正确的你当前的实现你不知道哪个图像将首先加载，但IMO它是错误的包装一切在同一个回调，因为你将不得不等待第一个图像已加载触发加载下一个，whcih

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

这样有利于稍后调用你的绘图函数，并且保持你的代码更清晰：

 < canvas id =canvaswidth =900height =700>< / canvas>  

div>

I am using HTML5 canvas and putting two images there but I am facing one problem which is, one image is loaded and visible in chrome but another image is only visible in mozilla but after refresh. I don't know why this is happening as I am new in 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

解决方案

@Rayon's answer is right in that with your current implementation you can't know which image will have loaded first, but IMO it is wrong to wrap everything in the same callback, since you will have to wait for the first image has loaded before trigger the loading of the next one, whcih will produce a flicker apparition of the last image.

Instead, create a preloader function that will trigger a drawing function when both images have been loaded.

This has the advantage to make it easier to call your drawing function later, and also to keep your code a bit cleaner :

/* 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];

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

这篇关于HTML5画布图片在Chrome中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！