読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 マスクをかける

クリッピングを使用すると、canvas内にマスクを適用させることができます。クリッピングされた部分だけが表示され、それ以外の部分は非表示になります。

クリッピングの方法

クリッピングは矩形(rect)、または円形(arc)を設定してclipメソッドを呼び出すことで、設定した矩形(円形)の部分がマスクになり、そこからはみ出た部分は非表示になります。
以下のサンプルは、円と矩形の設定を行い、その部分のクリッピングを行っています。これ以降は、クリッピングが適用された部分しか表示されなくなります。

// 円のマスクを作成
context.arc(50, 50, 40, 0, 6.28, false);
// 矩形のマスクを作成
context.rect(50, 50, 100, 100);
// クリッピング開始
context.clip();
注意 クリッピングの対象となるのは、 clipメソッドの呼び出し後に描画されたものだけで、それ以前に描画された部分には適用されません。
クリッピングの解除

一度クリッピングを行うと、その後に描画されるもの全てがマスクの対象となってしまうので、クリッピングの解除が必要になります。saverestoreメソッドを使用して、クリッピングが不要になったら、設定をクリッピングを行う前に戻してやります。

// 現在の設定を保存する
context.save();

// クリッピング開始
context.rect(50, 50, 100, 100);
context.clip();

/* マスク内の描画処理を行う */

// クリッピング解除
context.restore();