JavaScript: canvas の画像や図形を回転させる

HTML5 Canvas API を使って、画像や図形を回転させることができます。

回転させるには rotate() メソッドを使用します。

rotate() メソッドの構文(回転角度の単位はラジアンです。)


rotate(回転角度)

// 例:30度回転
rotate(30 * Math.PI / 180)

まずは画像を回転させてみます。

サンプルコード: 画像を回転

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, 60, 0);

    // 30度 回転
    c.rotate(30 * Math.PI / 180);
    c.drawImage(img, 60, 0);

}

2つの画像を描画しています。上は通常表示で、下が30度回転させたものです。 比較できるように、どちらも引数(img, 60, 0)を同じように設定しています。

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

注意点としては実行結果を見るとわかるように、画像の左上や中央から回転しているのではなく、 canvas の左上から回転しています。

次は図形を回転させてみます。

サンプルコード: 図形を回転

HTML・CSS は省略します。

JavaScript


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

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

// 45度回転
c.rotate(45 * Math.PI / 180);
c.fillRect(50, 0, 20, 20);

図形も同じように回転できます。今回は fillRect() で矩形を描画していますので、 回転させたい図形を描く前に、rotate() メソッドを実行します。

JavaScript入門