원 개체 위에 이미지를 배치하려면 어떻게해야합니까?

Question

다음은 캔버스 게임에 사용하는 내 원 변수입니다. 캔버스를 가로 지르는 움직임을 유지하면서 어떻게 이미지를 그 위에 놓을까요?

var img = new Image(); 
img.src = "img.png"; 

var ball = { 
    radius: 0 
    ,position: { x: 0, y: 0 } 
    ,velocity: { x: 0, y: 0 } 
    ,acceleration: 0 
    ,draw: 
    function() { 
     context.fillStyle = "yellow"; 
     context.beginPath(); 
     context.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI); 
     context.fill(); 
     } 
}; 

Answer 1

가장 기본적인 방법은 클립

,draw() { 
     context.beginPath(); 
     context.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI); 
     context.save(); // save current state 
     context.clip(); 
     context.drawImage(myImage,this.position.x-this.radius,this.position.y-this.radius,this.radius * 2,this.radius * 2); 
     context.restore(); // removes the clip. 
     } 

을 만드는 것입니다하지만이 그것을 할 수있는 느린 방법입니다. 가장 좋은 방법은 globalCompositeOperation을 사용하여 마스크를 만들어 이미지를 마스크하는 것입니다. 또한 마스크 된 이미지를 오프 스크린 캔버스에 그려야 만 마스킹을 한 번만 수행 한 다음 오프 스크린 캔버스를 그립니다.