FC2ブログ

クリッピング処理

クリッピング処理

クリッピング処理は画像の一部を切り抜いて表示すること

今回はクリッピング領域へ四角形描画

まず
でクリッピング領域を指定するパスを生成
パス生成はどの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()はスタック式なので
最後に保存した状態が取り出される

仮想マシンのスナップショットのようなかんじ
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック