FC2ブログ

画像を一部分だけ切り取って描画

画像を一部分だけ取り出して描画 

画像を一部分だけ取り出して
canvasへ描画するには
drawImage()を使う

書式は
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

以下は引数の意味
image
Imageオブジェクト

sx
切り取る範囲のx座標

sy
切り取る範囲のy座標

sw
切り取る範囲の横幅

sh
切り取る範囲の縦幅

dx
canvasへ描画する画像のx座標

dy
canvasへ描画する画像のy座標

dw
canvasへ描画する画像の横幅

dh
canvasへ描画する画像の縦幅

この
dw
dh
の値を
dw*3
とか
dh*3とかにすると、拡大表示ができるようになる

たとえば
等倍表示が
context.drawImage(image,0,0);

一部分だけ切り取って3倍の大きさで表示するなら
context.drawImage(
image,100,100,85,85,10,10,85*3,85*3)
とする

この意味は
image画像を
x=100,y=100 の座標から
85 * 85 の大きさで切り取り
canvasの座標 x=10,y=10 の座標へ描画
このとき、元の 85 x 85 の画像を
3倍の大きさで表示

という意味になる
スポンサーサイト



コメント

非公開コメント

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