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

【问题标题】：How do i place an image over circle object?如何将图像放置在圆形对象上？
【发布时间】：2017-04-28 12:46:54
【问题描述】：

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

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();
      }  
};

【问题讨论】：

标签： javascript php html css canvas

【解决方案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 创建一个蒙版，以便您对图像进行蒙版。此外，您应该在屏幕外画布上绘制蒙版图像，因此您只需进行一次蒙版，然后只需绘制屏幕外画布..

【讨论】：