如何在圆形对象上放置图像？

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创建遮罩，以便遮罩图像。 另外，您应该在屏幕外的画布上绘制遮罩的图像，这样您只需要做一次遮罩，然后再绘制屏幕外的画布即可。