CSS Radial Clip

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