JavaScript: canvas の画像や図形を拡大・縮小する

HTML5 Canvas API を使って、画像や図形を拡大・縮小させることができます。

拡大・縮小させるには scale() メソッドを使用します。

scale() メソッドの構文


scale(水平倍率, 垂直倍率)

// 例: 水平方向に1.5倍、垂直方向に0.8倍
scale(1.5, 0.8)

サンプルコード: 画像を拡大

HTML・CSS


<canvas id="canvas"></canvas>

<style>
    canvas {
        border: 1px solid silver;
    }
</style>

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

// Image オブジェクトを生成
var img = new Image();
img.src = '../sample/img/bg_nangoku2.jpg';

img.onload = function(){
    // 通常
    c.drawImage(img, 0, 0);

    // 拡大
    c.scale(1.5, 1.5);
    c.drawImage(img, 50, 50);

}

２つの画像を描画しています。上は通常表示で、下が scale(1.5, 1.5) を実行させたものです。

拡大・縮小させる場合は、描画する前に scale() メソッドを実行します。 今回は２つめの画像だけを回転するので、２つめの drawImage() メソッドの前に scale() メソッドを実行しています。

注意点としては画像の左上や中央から拡大しているのではなく、 canvas の左上から拡大している所です。

ですから drawImage(img, 50, 50)としていますが、実際は(50, 50) ではなく、 (75, 75) から描画されています。

次は図形を拡大・縮小させてみます。

サンプルコード: 図形を拡大・縮小

HTML・CSS は省略します。

JavaScript


var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');

// 通常
c.fillRect(0, 0, 20, 20);

// 拡大・縮小
c.scale(1.2, 0.8);
c.fillRect(20, 20, 20, 20);

今回は fillRect() メソッドで矩形を描画しています。

指定しているサイズはどちらも幅 20、高さ 20 と同じです。

２番目の図形は、幅を 1.2倍、高さを 0.8倍に指定しています。 描画を開始する点(x, y)は(20, 20)を指定しているのですが、 canvas の左上から拡大・縮小されますので、 実際は(24, 16)から描画が開始されていることに注意してください。

JavaScript入門