그려진 개체로 HTML5 캔버스 패턴 채우기 스타일을 만드는 방법은 무엇입니까?

Question

나는 dwmkerr's spaceinvader 프로젝트를 사용하여 친구를위한 웹 사이트를 만들었습니다. 기본적으로 나는 무작위로 쏘지 않기 위해 mod를 시도하고 있지만 그의 얼굴은 그렇다.

불행하게도,이 조금 나에게 끔찍한 시간을주고있다 :

는

for(var i=0; i<this.invaders.length; i++) { 
    var invader = this.invaders[i]; 
    var robbie=document.getElementById("robbie"); 
    var pat=ctx.createPattern(robbie, "repeat"); 
    ctx.fillStyle = pat; 
    ctx.fillRect(invader.x - invader.width/2, invader.y - invader.height/2, invader.width, invader.height); 
}` 

실무 예제는 here이다. 보시다시피 패턴은 개별 개체로 다시 그리기가 아니라 배경으로 작동합니다. 나는 얼굴이 각 상자에 움직이기위한 backround로 맞추기를 원합니다. 각각의 개별 상자로 다시 그리기.

Here은 나머지 js입니다. 텍스트가 길어지면 길어집니다.

어떤 도움을 주실 수 있나요? 업데이트

Answer 1

사용 drawImage 대신 fillRect

var robbie = document.getElementById("robbie"); 

for(var i=0; i<this.invaders.length; i++) { 
    var invader = this.invaders[i]; 
    ctx.drawImage(robbie,invader.x - invader.width/2, invader.y - invader.height/2); 
}