Chrome 캔버스 렌더링 문제

Question

작은 자바 스크립트 게임을 만들었으며 모든 주요 브라우저에서 내 로컬 컴퓨터에서 테스트 했으므로 정상적으로 작동합니다. 그 후에 내가 호스팅 서버에 게임을 업로드하고 Chrome에서 게임이 표시되지 않고 캔버스 영역이 회색이지만 파이어 폭스에서 잘 작동하지만 누구나 알 수 있습니까?

이

draw: function(){ 
    basket_catcherImg = new Image(); 
    basket_catcherImg.src = 'images/basket.png'; 
    ctx.drawImage(basket_catcherImg, this.x, this.y, this.w, this.h); 
// ... 

이 아주 잘 작동하지 않습니다 : 여기 적어도이의에 발견하여 catcher_game.js 파일에서 데모

http://djordjepetrovic.rs/igrica/

Answer 1

에 대한 링크입니다. 이미지가 디스크에서 캐시되므로 컴퓨터에서 로컬로 작동합니다. 이미지가로드 될 때까지 drawImage 요구를 기다릴 수 있도록

로드 이미지는 비동기 작업입니다 - 적절한 방법은 다음과 같습니다

draw: function(){ 
    var me = this; 
    basket_catcherImg = document.createElement('img'); 
    basket_catcherImg.onload = function() { 
     ctx.drawImage(basket_catcherImg, me.x, me.y, me.w, me.h); 
    } 
    basket_catcherImg.src = 'images/basket.png'; 
    //... 

당신은뿐만 아니라 IMG의 다른 이러한 경우이 작업을 수행해야합니다.

여기서 me이 필요한 이유는 this이 onload 콜백에서 호출 될 때 image 요소로 변경 되었기 때문입니다. 따라서 원래 this 컨텍스트에 대한 참조를 유지해야합니다.

new Image()을 createElement('img')으로 바꿔야합니다. 현재이 문제를 올바르게 처리하지 못하는 an issue in Chrome이 있습니다.

그런데 멋진 그래픽!