html5キャンバス、アーチやサークルの背景としての画像

Question

こんにちは、私の最初の投稿。

私はキャンバスに円を描いていて、空と地面の部分に分かれていて、時計の手が円の端まで伸びていたので想像してください。 'そして手は動いている。私はそれらの2つの部分のために異なる（背景）画像を持っていたいと思います。今、グラデーションの塗りつぶしがありますが、適切な画像でグラデーションを変更したいと思います。画像は、「パイスライス」の全体部分を埋める必要があります。 これまでの私のコード：

// ground portion of circle 
    var lingrad=ctx.createLinearGradient(center.x, center.y,center.x,main_radius*2); 
    lingrad.addColorStop(0,'green'); 
    lingrad.addColorStop(1,'brown'); 
    ctx.fillStyle=lingrad; 
    ctx.beginPath(); 
    ctx.moveTo(center.x, center.y); 
    ctx.lineTo(x2, y2); 
    ctx.arc(center.x, center.y, radius, d2r(z1 + 90), d2r(v1 + 90), false); 
    ctx.moveTo(center.x, center.y); 
    ctx.lineTo(x1, y1); 
    ctx.closePath(); 
    ctx.fill(); 
    // sky portion of circle 
    var lingrad1=ctx.createLinearGradient(center.x,0,center.x,center.y); 
    lingrad1.addColorStop(0,'yellow'); 
    lingrad1.addColorStop(0.5,'yellow'); 
    lingrad1.addColorStop(1,'cyan'); 
    ctx.fillStyle=lingrad1; 
    ctx.beginPath(); 
    ctx.moveTo(center.x, center.y); 
    ctx.lineTo(x2, y2); 
    ctx.arc(center.x, center.y, radius, d2r(z1 + 90), d2r(v1 + 90), true); 
    ctx.moveTo(center.x, center.y); 
    ctx.lineTo(x1, y1); 
    ctx.closePath(); 
    ctx.fill(); 

はあなたに感謝し、私の英語

Answer 1

のため申し訳ありませんが、最初のarc()を使用してクリップのパスを定義することによって、これを行うclip()を呼び出して、2つに描画する例clip()ために使用することができます各半分の画像。

簡単な例：あなたはもちろんの位置、大きさだけでなく、味にdrawImage()の引数をクリッピングを使用することができます

var img1 = new Image, img2 = new Image, count = 0, ctx = c.getContext("2d"); 
 
img1.onload = img2.onload = go; 
 
img1.src = "//i.stack.imgur.com/EU6KB.jpg"; 
 
img2.src = "//i.stack.imgur.com/UmEA9.jpg"; 
 

 
function go() { 
 
    if (++count < 2) return; // just to make sure both images has loaded 
 
    
 
    // save state as restoring is the only way to remove a clip-mask 
 
    ctx.save(); 
 
    
 
    // define clip-mask using path operations 
 
    ctx.arc(75, 75, 75, 0, 6.28); 
 
    ctx.clip(); 
 
    
 
    // draw in top image 
 
    ctx.drawImage(img1, 0, 0); 
 

 
    // draw in bottom image 
 
    ctx.drawImage(img2, 0, 75); 
 
    
 
    // remove clip mask 
 
    ctx.restore(); 
 
}

<canvas id=c></canvas>

。