HTML5 캔버스 이미지가 크롬에서 보이지 않습니다.

Question

HTML5 캔버스를 사용하고 거기에 두 개의 이미지를 넣고 있지만 하나의 이미지가로드되어 크롬에서 볼 수 있지만 다른 이미지는 모질라에서만 볼 수 있지만 새로 고친 후에 만 ​​볼 수 있습니다. 나는 이것이 캔버스에서 새로운 것처럼 왜 일어나는 지 모르겠다. onload 이벤트가 비동기

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

으로 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>