画像を一部分だけ取り出して描画
画像を一部分だけ取り出して
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倍の大きさで表示
という意味になる