キャンバス - クリップされたキャンバスからのサブ抽象的な形

Question

javascriptsキャンバスを介して画像から環（つまりリング）をクリップしたいと思います。 私はすでにアプローチしていますが、あまりにも控えめであると思います。なぜ、これがなぜ機能するのか、なぜそれが小さなサークルになるのか理解できません。

see this jsfiddle

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

これを行うには良い方法はありますか？

Answer 1

これは、clipメソッドによって呼び出されるクリッピング領域がスタックするため機能します。

IMO、クリッピングする前に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>