クリッピング処理

クリッピング処理
クリッピング処理は画像の一部を切り抜いて表示すること
今回はクリッピング領域へ四角形描画
まず
でクリッピング領域を指定するパスを生成
パス生成はどのcanvasでもおなじ
context.beginPath();
でパス生成し
context.arc(430,250,90,0,Math.PI,false);
でパス構築
context.clip()
で
パスがクリッピング領域として設定され
その中へのみ画像や図形が描画される
今回は
strokeRect()で
クリッピング領域内へ四角形描画してる
ソースが
context.strokeRect(310,200,200,100);
ちなみに、引数は
310, 開始のx座標
200, 開始のY座標
200, 横幅
100 縦幅
となる
クリッピングの解除には
save()
restore()
を使う
save()はcanvasの状態を保存し
restore()はsave()で保存した状態を復元
つまり、
save()でクリッピング前を保存して
処理が終わってから
restore()で戻す
save()は何回も保存できる
save()はスタック式なので
最後に保存した状態が取り出される
仮想マシンのスナップショットのようなかんじ