javascript - 如何将图像放在圆形对象上？

Question

这是我用于 Canvas 游戏的圆圈变量。我将如何在保持图像在 Canvas 上移动的同时在其上放置图像？

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 创建一个 mask ，以便 mask 图像。此外，您应该在屏幕外 Canvas 上绘制蒙版图像，这样您只需进行一次蒙版，然后只需绘制屏幕外 Canvas 即可。