SYNCERのロゴ
アイキャッチ画像

回転する方法

Canvasで回転するには、コンテキストのrotate()を利用しましょう。中心を軸に回転するにはtranslate()を利用します。

サンプルコード

回転するには、rotate()に角度を指定します。角度はラジアン単位でなければいけません。

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// パスをリセット
context.beginPath () ;

// 回転 (50度)
context.rotate( 50 * Math.PI / 180 ) ;

// レクタングルを作成
context.fillStyle = "red" ;
context.fillRect( 75, 75, 50, 50 ) ;

回転はcanvasの左上が軸になります。これだと多くの場合、思った通りの回転にならないでしょう。軸を中心にしたい場合は、translate()で水平方向、垂直方向の位置をcanvasの半分のサイズだけずらしてから回転を実行し、さらにずらした分だけ元に戻して下さい。後は通常通りに描画してかまいません。下記はcanvasのサイズが200x200の場合の例です。

context.translate( 200/2, 200/2 ) ;	// 1: 水平位置、垂直位置をcanvasの半分だけずらして
context.rotate( 50 * Math.PI / 180 ) ;	// 2: 回転を実行し、
context.translate( -200/2, -200/2 ) ;	// 3: その後、ずらした分だけ位置を戻す

デモ

軸を中心にした場合とそうでない場合のデモを用意しています。アニメーションで見ると、軸の位置が分かりやすいと思います。

軸が左上

静的

角度を変更できます。

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath () ;

context.rotate( 50 * Math.PI / 180 ) ;

context.fillStyle = "red" ;
context.fillRect( 75, 75, 50, 50 ) ;

200x200のキャンパスです。

アニメーション

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

var degree = 0 ;

setInterval( function () {
	context.save() ;

	context.beginPath () ;
	context.clearRect( 0, 0, element.width, element.height ) ;

	context.rotate( ++degree * Math.PI / 180 ) ;

	context.fillStyle = "red" ;
	context.fillRect( 75, 75, 50, 50 ) ;

	context.restore() ;
}, 25 ) ;

200x200のキャンパスです。

軸が中心

静的

角度を変更できます。

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath () ;

context.translate( element.width/2, element.height/2 ) ;
context.rotate( 50 * Math.PI / 180 ) ;
context.translate( -element.width/2, -element.height/2 ) ;

context.fillStyle = "red" ;
context.fillRect( 75, 75, 50, 50 ) ;

200x200のキャンパスです。

アニメーション

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

var degree = 0 ;

setInterval( function () {
	context.save() ;

	context.beginPath () ;
	context.clearRect( 0, 0, element.width, element.height ) ;

	context.translate( element.width/2, element.height/2 ) ;
	context.rotate( ++degree * Math.PI / 180 ) ;
	context.translate( -element.width/2, -element.height/2 ) ;

	context.fillStyle = "red" ;
	context.fillRect( 75, 75, 50, 50 ) ;

	context.restore() ;
}, 25 ) ;

200x200のキャンパスです。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月4日 (金)
コンテンツを公開しました。