html - キャンバスで円形の画像を切り取る

Question

私は html5 キャンバスを使用しています。あなたの顔をゲームにアップロードしてメインキャラクターとして使用できるようにゲームを作成しています。残念ながら、ゲーム内のキャラクターはスマイリーフェイスのように円形です。

では、これはどのように行われるのでしょうか？

写真を撮って円を切り取って、円の外側が透明になるようにすることはできますか? もしそうなら、これはどのように行われますか？

score 6 · Accepted Answer

クリッピングパスを作成する必要があります。このパスは、円の外側のすべてをクリップします:

ctx.save();

ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath();
ctx.clip();

// draw the image

ctx.restore();

したがって、このキャンバスに次に描画するものは、クリッピングパスの内側にのみ表示されます。

前後にコンテキストを保存して復元する必要があります。

このトピックについてもう少し詳しく説明します。

1 に答える 1