畫布 - 從剪裁的畫布中抽象形狀

我想通過javascripts畫布從圖像剪輯環（即環）。我已經有了一種方法，但我覺得它太不雅了（我真的不明白爲什麼這會起作用，爲什麼它不會導致更小的圓圈）。畫布 - 從剪裁的畫布中抽象形狀

context.drawImage(imageObj, 0, 0, 500, 500); 

    //crop outer circle 
    context2.beginPath(); 
    context2.arc(250, 250, 200, 0, 2 * Math.PI, false); 
    context2.closePath(); 
    context2.clip(); 

    //draw circle 
    context2.drawImage(canvas,0,0); 

    //crop inner circle 
    context2.beginPath(); 
    context2.arc(250, 250, 100, 0, 2 * Math.PI, false); 
    context2.closePath(); 
    context2.clip(); 

    //clear context 2 
    context2.clearRect(0,0,500,500) 

    // finally draw annulus 
    context2.drawImage(canvas2,0,0);

有沒有更好的方式來做到這一點？

來源

2016-09-22 InsOp

我沒有得到的目標。你不滿意在畫布上畫畫布嗎？ – Hydro

@TheProHands @TheProHands我想從已剪裁的形狀中剪下一個形狀（在Photoshop中，您可以將其稱爲「從選區中減去」），而不需要額外的步驟將臨時圖像繪製到第二個畫布。我想要一個解決方案（或至少希望我的解決方案被解釋） – InsOp

這確實有效，因爲由clip方法調用的裁剪區域會堆疊。

國際海事組織，這確實不是最好的辦法，因爲你肯定需要在削減之前撥打ctx.save();，之後再撥打ctx.restore()，這是非常繁重的方法。

我的首選方法是使用compositing：

var ctx = canvas.getContext('2d'); 
 

 
var imageObj = new Image(); 
 

 
imageObj.onload = function() { 
 

 
    ctx.drawImage(imageObj, 0, 0, 500, 500); 
 
    // keep only the outer circle 
 
    ctx.globalCompositeOperation = 'destination-in'; 
 
    ctx.beginPath(); 
 
    ctx.arc(250, 250, 200, 0, 2 * Math.PI, false); 
 
    ctx.fill(); 
 
    // remove the inner one 
 
    ctx.globalCompositeOperation = 'destination-out'; 
 
    ctx.beginPath(); 
 
    ctx.arc(250, 250, 100, 0, 2 * Math.PI, false); 
 
    ctx.fill(); 
 
    // reset gCO 
 
    ctx.globalCompositeOperation = 'source-over'; 
 

 
}; 
 
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

<canvas id="canvas" width="500" height="500"></canvas>

來源

2016-09-22 12:25:57 Kaiido

完美，這就是我搜索的。如果你願意，你可以編輯我的問題（以及將標題改爲更理解的標題），因爲我認爲其他用戶也會覺得這很有用。 – InsOp

@InsOp，不知道這個問題最好的標題是什麼......無論如何，很高興它有幫助。 Ps：其他gCO和訂單可以達到相同的結果，玩得開心;-) – Kaiido

畫布 - 從剪裁的畫布中抽象形狀

回答

相關問題