目次
本記事では、Canvasに描画した画像をマウスホイールで拡大・縮小する方法をご紹介しています。
Canvasの画像をマウスホイールで拡大・縮小する処理を作りたいんだけど、どうすればいいんだろう？
上記の疑問にお答えします。
では、解説していきます。
スポンサーリンク
Canvasに画像を描画する
Canvasに画像を描画します。Canvasに画像を描画するにはdrawImage()を使用します。drawImage()に指定することができる引数はいくつか種類がありますが、本記事では、描画に最低限必要なイメージの描画位置とサイズのみを指定します。
ctx.drawImage(image, x, y, width, height);
各引数には下記の値を指定します。
| image | イメージオブジェクト |
| x | Chavasの左上からのx座標 |
| y | Chavasの左上からのy座標 |
| width | 画像の幅（ピクセル） |
| height | 画像の高さ（ピクセル） |
試しにCanvasに画像を描画してみます。
HTML
<canvas id="canvas" width="470" height="300"></canvas>
JavaScript
//canvas取得
const canvas = document.getElementById('canvas');
//canvasに描画するコンテキスト取得
const ctx = canvas.getContext('2d');
//画像生成
const image = new Image();
//画像指定
image.src = 'https://into-the-program.com/demo/images/sample010.jpg';
//画像描画用変数
const x = 0, y = 0, width = 470, height = 300;
//画像描画
image.onload = ()=>{
ctx.drawImage(image, x, y, width, height);
}
実行結果
See the Pen 7307-1 by ryohei (@intotheprogram) on CodePen.
実行結果の通り、Canvasに画像が描画されます。引数の値がどういった役割を持っているのか、座標値を変更したり、画像幅や高さを指定したりすると理解が深まるのでおすすめです。
Canvasの画像を拡大・縮小する
Canvasに画像を描画することができましたので、次は描画した画像を拡大・縮小してみます。拡大・縮小にはscale()を使用します。scale()は引数に指定した値（整数・少数）に応じて画像を拡大・縮小することができます。
ctx.scale(scale, scale);
動作確認もかねて、前項で描画した画像にscale(1.5, 1.5)を実行して拡大してみます。
HTML
<canvas id="canvas" width="470" height="300"></canvas>
JavaScript
//canvas取得
const canvas = document.getElementById('canvas');
//canvasに描画するコンテキスト取得
const ctx = canvas.getContext('2d');
//画像生成
const image = new Image();
//画像指定
image.src = 'https://into-the-program.com/demo/images/sample010.jpg';
//画像描画用変数
const x = 0, y = 0, width = 470, height = 300;
//画像拡大・縮小
ctx.scale(1.5, 1.5);
//画像描画
image.onload = ()=>{
ctx.drawImage(image, x, y, width, height);
}
実行結果
See the Pen 7307-2 by ryohei (@intotheprogram) on CodePen.
Canvasに描画された画像がscale()に指定した値て拡大されました。縮小する場合は少数を指定してくださいね。
スポンサーリンク
Canvasの画像をマウスホイールで拡大・縮小する
Canvasのおさらいができたところで、マウスホイールにあわせて拡大・縮小する処理を作成します。JavaScriptが長くなってしまいましたので、各行にコメントを記載しています。実装される場合に参考にしていただければ幸いです。
HTML
<canvas id="canvas" width="470" height="300"></canvas>
JavaScript
const draw = ()=>{
//canvas取得
const canvas = document.getElementById('canvas');
//canvasに描画するコンテキスト取得
const ctx = canvas.getContext('2d');
//画像生成
const image = new Image();
//画像指定
image.src = 'https://into-the-program.com/demo/images/sample010.jpg';
//画像描画用変数
const x = 0, y = 0, width = 470, height = 300;
//画像描画
image.onload = ()=>{
ctx.drawImage(image, x, y, width, height);
}
//拡大・縮小用変数
let scale = 1;
//マウスホイールイベント
canvas.addEventListener('wheel', ()=>{
//ページがスクロールしないようにイベントキャンセル
event.preventDefault();
//描画リセット
ctx.clearRect(0, 0, event.target.width, event.target.height);
//マウスホイールの Up/Down でscaleを0.1増減
scale += event.deltaY * -0.001;
//最小値(0.5)・最大値(2)を指定
scale = Math.min(Math.max(0.5, scale), 2);
//描画状態保存
ctx.save();
//画像拡大・縮小
ctx.scale(scale, scale);
//画像再描画
ctx.drawImage(image, x, y, width, height);
//描画状態復元
ctx.restore();
}, false);
}
draw();
実行結果
See the Pen 7307-3 by ryohei (@intotheprogram) on CodePen.
マウスホイールの動きに応じて、Canvasに描画した画像が拡大・縮小していますね。
Canvasについては下記ドキュメントに情報がつまってます。サンプルも豊富なので、実装時に参考にしていただければと思います。
最後に
Canvasは入門するまでは難しいように思えるですが、いざ触ってみると楽しく学ぶことができ、JavaScript側からの操作にも対応しているため、CSSだけでは難しかった位置調整などが簡単にできたり、本記事で紹介した拡大・縮小なんかも簡単に実装することができます。今後使用する機会が増えていくAPIだと思いますので、扱えるようになっておくと良いかもしれないですね。
以上、Canvasに描画した画像をマウスホイールで拡大・縮小する方法のご紹介でした！
