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