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() メソッドを実行します。