Verkappte Bilder im Canvas-Bereich austauschen

Question

Ich möchte zwei kreisförmige Schnitte aus einem Bild austauschen und ihre Positionen tauschen und sie auf die Leinwand zeichnen. Ich habe jedoch Probleme, das zweite kreisförmige Bild zu zeichnen. Interessanterweise in second, wenn Sie die erste Zeile auskommentieren, zeichnet es dieses Bild, andernfalls, wenn Sie es am Ende der Funktion werfen, zeichnet es nicht (mindestens oben). Wenn ich die erste Funktion auskommentiere, bekomme ich das Bild auf der Leinwand. Die erste Funktion wird immer vor der zweiten ausgeführt.

function first() { 
     ctx.drawImage(imgBig, 0, 0); 
     ctx.beginPath(); 
     ctx.arc(imgObj1.x + imgObj1.width/2, imgObj1.y + imgObj1.width/2, imgObj1.width/2, 0, 6.28, false); 
     ctx.clip(); 
     ctx.stroke(); // the outline of circle 
     ctx.closePath(); 
     ctx.drawImage(imgBig, imgObj2.x, imgObj2.y, imgObj2.width, imgObj2.height, imgObj1.x, imgObj1.y, imgObj1.width, imgObj1.height); 

function second() { 
     // ctx.drawImage(imgCuttingBoard, 0, 0); // this will draw over canvas 
     ctx.beginPath(); 
     ctx.arc(imgObj2.x + imgObj2.width/2, imgObj2.y + imgObj2.width/2, imgObj2.width/2, 0, 6.28, false); 
     ctx.clip(); 
     ctx.closePath(); 
     ctx.drawImage(imgCuttingBoard, imgObj1.x, imgObj1.y, imgObj1.width, imgObj1.height, imgObj2.x, imgObj2.y, 
     imgObj2.width, imgObj2.height); // this doesn't draw on top of the image (might be drawing underneath?) 
     // ctx.drawImage(imgCuttingBoard, 0, 0); // this will not draw over canvas here 
} 

Answer 1

Vorausgesetzt, dass Sie die Bild Zeit gegeben haben, in vollem Umfang zu drawImage bevor Sie versuchen, es zu laden. Sie haben image.onload verwendet und darauf gewartet, dass das Image geladen wird?

Dann wahrscheinlich Ihr Problem Clipping ist ...

context.clip ist kumulativ. Wenn ein Clip (Clip 1) auf die Leinwand angewendet wird, gefolgt von einem anderen Clip (Clip 2), ist der resultierende Ausschnittbereich der Schnittpunkt von Clip 1 und Clip 2. Der resultierende Clip ist nicht Clip # 2.

Wenn Sie also Clip # 1 rückgängig machen möchten, damit Sie den vollen Clip # 2 verwenden können, müssen Sie den ersten Clip in context.save und context.restore einpacken.

Hier ist eine etwas andere Art und Weise tun eine temporäre Leinwand

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/faces%20no%20background.png"; 
 
function start(){ 
 
    cw=canvas.width=img.width; 
 
    ch=canvas.height=img.height; 
 
    ctx.drawImage(img,0,0); 
 
    // do the swap 
 
    clipCircle(img,63.5,56,54,203,177); 
 
    clipCircle(img,203,177,54,63.5,56); 
 
} 
 

 
function clipCircle(img,sourceCX,sourceCY,r,newCX,newCY){ 
 
    var c=document.createElement('canvas'); 
 
    var cctx=c.getContext('2d'); 
 
    c.width=2*r; 
 
    c.height=2*r; 
 
    
 
    // define an clipping circle 
 
    cctx.beginPath(); 
 
    cctx.arc(r,r,r,0,Math.PI*2); 
 
    // draw the source into the temp canvas 
 
    cctx.drawImage(img,-sourceCX+r,-sourceCY+r); 
 
    // draw the temp canvas onto the main canvas 
 
    ctx.drawImage(c,newCX-r,newCY-r); 
 
}

body{ background-color: ivory; } 
 
canvas{border:1px solid red; margin:0 auto; }

<h4>Swapped clipping on canvas<br>(top-left swapped with bottom-center)</h4> 
 
<canvas id="canvas" width=300 height=300></canvas> 
 
<h4>Original Image</h4> 
 
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/faces%20no%20background.png'>