円のオブジェクトに画像を配置するにはどうすればいいですか？

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を使用してマスクを作成し、イメージをマスクすることです。また、オフスクリーンキャンバス上にマスクされたイメージを描画する必要があります。そのため、マスキングを1回だけ実行してからオフスクリーンキャンバスを描画するだけです。