캔버스 : drawImage가 캔버스에 이미지를 그리지 않습니다.

Question

저는 게임에 캔버스를 사용하고 있습니다. 캔버스에 그려지는 Sprite 객체를 가지고 있습니다. Sprite 클래스에서는 객체를 만들 때 src 속성과 함께 Image 멤버를 만듭니다.

다음은 작동하지 않는 코드입니다 :

Sprite.prototype.draw = function(Context){ 
    this.Image.onLoad = function(){ 
    Context.drawImage(this.getImage(),this.getX(),this.getY()); 
    }; 
}; 

을 내가 이미지 파일 경로 인 문자열 PARAM을 전달 객체 생성자에서 -이 제대로 저장되고있다.

Sprite.prototype.setImage = function(){ 
    this.Image = document.createElement('img'); 
    this.Image.src = this.getImagePath(); //This just returns the path as a                  
              string 
}; 

나는 런타임에 오류를 얻을 ... 아직 이미지가 화면에 그려지지 않습니다 :

나는 문제는 setImage 기능에 거짓말 느낌이있다?

누구나 무슨 일이 일어 났는지 지적 해 줄 수 있습니까? 나는 이것에 대한 해답을 찾았지만 모든 요소는 html 문서에서 만들어졌지만 광산은 즉석에서 만들어졌지만 그 차이가 있는지는 모르겠다.

건배

Answer 1

당신의 코드가 동기 모델을 구축하고 있지만 예상대로이 작동하지 않습니다 의미 비동기 전화를 사용하고 있습니다.

먼저 이미지 객체에 URL로드를 설정하면로드 프로세스가 즉시 호출됩니다. 그때 당신이 그 때 이미지를 그리기 호출 할 수 있습니다 또는로드되지 않을 수 있습니다 (캐시에 존재하는 경우이 프로세스는 일반적으로 인스턴트) 그래서 당신은 onload 처리기를 설정하면 (소문자 여야합니다) 이미지 개체는 아마도 패스입니다 그 단계는 호출되지 않을 것입니다 (브라우저가 설정되기를 기다리지 않습니다).

이 기능을 사용하려면 콜백 및/또는 약속과 같은 다른 모델을 사용해야합니다. 간단하게 콜백을 위해 잘 할 것입니다.

이의 예는 수 :

Sprite.prototype.setImage = function(callback){ 
    this.Image = document.createElement('img'); 
    this.Image.onload = function() { 
     callback(this); /// just for ex: passing image to callback (or other inf) 
    } 
    this.Image.src = this.getImagePath(); 
}; 
Sprite.prototype.draw = function(Context){ 
    Context.drawImage(this.getImage(), this.getX(), this.getY()); 
}; 

이미지가 그냥 예를 들어 다시, 당신은 콜백으로 지정된 함수를 호출합니다로드이 방법 : 개인적으로 (

var sprite = new Sprite(); /// pseudo as I don't know you real code 

sprite.setImagePath('someurl'); 
sprite.setImage(imageLoaded); 

function imageLoaded() { 
    sprite.draw(context); 
} 

를 I setImagePath과 setImage을 병합합니다.