javascript - 画像を使用したHTML5context.clip（）

Question

次のような形状を作成する代わりに、画像をクリッピングマスクとして使用する方法はありますか？

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();

私はcontext.drawImage('myimg.png')コンテキストとクリップの上にしようとしましたが、それはうまくいきませんでした。

Answer 1

clipパスを直接使用することしかできません。

クリップしたい画像がある場合は、コンテンツを別のキャンバスに描画し、（マスクを使用して）組み合わせて使用​​し、不要なビットを削除することで、これを実現できます。globalCompositeOperationdrawImage

.drawImage次に、 （おそらく別の）を再度使用globalCompositeOperationして、クリップされた画像を元のコンテンツとマージします。

たとえば、http：//www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/を参照してください。