CSS径向剪辑

Question

我有一个圆形图像（png），我想使用clip来掩盖它的一部分。有这种类型的径向夹子吗？ （假设我想使用剪辑蒙版

将圆圈转换为饼图，例如仅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();