見出し画像

やっぱり。JavaScript！- Canvasアニメーション。

donguri

Canvasで回転させるアニメーションはちょっとコツが必要です。

HTMLは基本的な構造にCanvasを表示させる部分を入れ込みます。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8"/>

 </head>
 <body>
 <canvas id="canvas" width="500" height="500"></canvas>

 <script>

//　必要な処理

 </script>


 </body>
</html>

あとはscriptタグの位置にJavaScriptを書いていきます。

参考サイトです。

まず、アニメーションさせるということを考えます。物体、物が動くように見えるというのは連続してものが移動していくことです。普通に移動したぶんを全て描画してしまうとそれは、線となってしまいます。動いているように見えるのは物体が移動した時にその前に描画した物を消すことで線ではなく点で物が動くように見えます。

移動するたびに画面を再描画(一旦消して少し場所を移動して再度表示を繰り返す)させることで動いて見えるようになります。

Canvasの原点を中心に回転


四角を回転させましょう。まず四角全体をある中心点を起点に回す方法です(軸が左上)。

まずアニメーションさせるために必要な角度を定義しておきます。

var degree = 0 ;

一定時間で動くようにするための命令を書きます。

setInterval(関数, 一定時間の間隔 ) ;

その動かす関数(function)の全体は以下。一定の間隔としては25ミリ秒ごとに更新させる設定となっています。

function () {
　context.save() ;

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

処理内容については、まず最初の状態を保存しておきます。

context.save() ;

そして描画されているものを消す処理。

ctx.clearRect( 0, 0, canvas.width, canvas.height ) ;

角度"degree"分回転します。常に"++"あので更新し続けるということなので回転することになります。。

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

次に、動く物体である四角を描画して

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


最後に

context.restore() ;

して最初に保存した物を呼び出します。

これを25ミリ秒ごとに実行します。

四角の中心で回転

四角の中心で回転させるには四角自体を動かして中心で回転させる必要があるので"translate"を使って座標を移動させます。

回転の中心の座標に移動、ついで四角の描画の座標に移動と２回"translate"を使っています。

移動することの他については移動なしの回転と同じようにすればうまくいきますす。

移動する中心の座標を計算して求めます。

ctx.fillRect( 75, 75, 50, 50 ) ;  　　・・・ctx.fillRect(x, y, 幅, 高さ)　

中心の座標　 x = x + 0.5 * 幅. y = y + 0.5 * 高さ

"translate"の移動については

全体です。

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

	ctx.beginPath () ;
	ctx.clearRect( 0, 0, canvas.width, canvas.height ) ;

	ctx.translate( 100, 100 ) ;
	ctx.rotate( ++degree * Math.PI / 180 ) ;
	ctx.translate( -100, -100 ) ;

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

	ctx.restore() ;
}, 25 ) ;


この記事が気に入ったらサポートをしてみませんか？