【Canvas】描画した画像をマウスホイールで拡大・縮小する

こんにちは、Ryohei（@ityryohei）です！

本記事では、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については下記ドキュメントに情報がつまってます。サンプルも豊富なので、実装時に参考にしていただければと思います。

参考：https://developer.mozilla.org/ja/docs/Web/API/Canvas_API

最後に

Canvasは入門するまでは難しいように思えるAPIですが、いざ触ってみると楽しく学ぶことができ、JavaScript側からの操作にも対応しているため、CSSだけでは難しかった位置調整などが簡単にできたり、本記事で紹介した拡大・縮小なんかも簡単に実装することができます。今後使用する機会が増えていくAPIだと思いますので、扱えるようになっておくと良いかもしれないですね。

以上、Canvasに描画した画像をマウスホイールで拡大・縮小する方法のご紹介でした！