html - CSSラジアルクリップ

Question

clip円（png）の画像があり、その一部をマスクするために使用したいと思います。そのようなタイプのラジアルクリップはありますか？（たとえば、円を円グラフに変換したいとします。たとえば、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();