如何在圓形物體上放置圖像？

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創建一個遮罩，以便遮罩圖像。此外，您應該在屏幕外畫布上繪製蒙版圖像，這樣您只需進行一次蒙版，然後只需畫出屏幕外的畫布即可。