CSS徑向剪輯

Question

我有一個圓（PNG）的圖像，並且我想使用clip掩蓋它的一部分。有這種類型的徑向夾子嗎？ （說我想圓轉換爲餅圖e.g只有32％），與剪裁蒙

編輯：也許提示在SVG疊加是，如果這個心不是可能很好嗎？

Answer 1

使用Canvas（和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();