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);

}

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

拡大・縮小させる場合は、描画する前に scale() メソッドを実行します。 今回は2つめの画像だけを回転するので、2つめの 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 と同じです。

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

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト