html5 Leinwand, Bild als Hintergrund für Bogen oder Kreis

Question

Hallo Stackoverflow Leute, mein erster Beitrag hier.

Ich habe einen Kreis auf Leinwand, und Kreis in Himmel und Boden unterteilt, und es ist (Analog-) Uhr, so stellen Sie sich vor, wie Zeiger der Uhr bis zum Rand des Kreises verlängert wurden, so dass zwei Kuchenscheiben ". Und die Hände bewegen sich. Ich hätte gerne verschiedene (Hintergrund-) Bilder für diese beiden Teile. Jetzt habe ich gradiant fill, aber ich würde gerne gradiant mit entsprechenden Bildern ändern. Die Bilder müssen ihre gesamte Portion "Kuchenscheibe" ausfüllen. Mein Code so weit:

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

danke und sorry für mein Englisch

Answer 1

Sie zum Beispiel verwenden können clip(), dies zu tun, indem man zuerst den Clip Pfad definiert arc() verwenden, clip() nennen, dann in die beiden ziehen Bilder in jeder Hälfte.

Ein einfaches Beispiel:

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>

Sie können natürlich die Position verwenden, Größe sowie Clipping-Argumente von drawImage() abschmecken.