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