캔버스 - 클리핑 된 캔버스의 초록 모양

Question

javascript 캔버스를 통해 이미지의 고리 (즉, 링)를 자르고 싶습니다. 나는 이미 접근법을 가지고있다. 그러나 나는 그 것이 너무 우아하지 않다고 생각한다. (그리고 왜 이것이 효과가 있는지, 왜 그것이 더 작은 원을 만들어 내는지 이해할 수 없다.)

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>