CSS 방사형 클립

Question

이미지의 원 (png)이 있는데 그 중 일부를 가려 내기 위해 clip을 사용하고 싶습니다. 방사형 클립 같은 종류가 있습니까? (클립 보드로 원을 원형 차트 (예 : 32 % 만 가능)로 변환하고 싶습니다.

편집 : 가능하지 않은 경우 SVG 오버레이에 대한 팁이 좋을까요?

Answer 1

은 캔버스를 사용하여 (그리고 JQuery와의 아주 작은 비트 노드 참조를 얻기 위해) :

var ctx = $('#canvasTag')[0].getContext('2d'); 

// draw your image 
ctx.drawImage($('#imgTag')[0], x, y); 

// change composite operation so that only the image below the arc below shows 
ctx.globalCompositeOperation = 'destination-in'; 

// draw part of a circle 
ctx.beginPath(); 
ctx.arc(x, y, radius, startAngle, endAngle, false); // draw outer arc 
ctx.lineTo(x, y);         // draw to center 
ctx.closePath(); 
ctx.fill();