html5のCanvasを使ってアニメーションを作る2

第一回のコードを改善してきます。

変数を使う

変数を使って、コードを改善します。

現在のコードは以下のようになっています。

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
        
ctx.fillText('M', 50, 50);
ctx.fillText('M', 60, 60);
ctx.fillText('M', 70, 70);
ctx.fillText('M', 80, 80);
ctx.fillText('M', 90, 90);
ctx.fillText('M', 100, 100);
ctx.fillText('M', 110, 110);
ctx.fillText('M', 120, 120);
ctx.fillText('M', 130, 130);
ctx.fillText('M', 140, 140);

x座標とy座標の部分は以下のようにも表現できます。

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
        
ctx.fillText('M', 50, 50);
ctx.fillText('M', 50 + 10, 50 + 10);
ctx.fillText('M', 50 + 10 + 10, 50 + 10 + 10);

始めの座標(x=50 y=50)に対して、10 をプラスしています。
ここで、x座標とy座標の開始点を変数で表現します。

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

var x = 50;
var y = 50;
        
ctx.fillText('M', x, y);
ctx.fillText('M', x + 10, y + 10);
ctx.fillText('M', x + 10 + 10, y + 10 + 10);

さらに、10 をプラスする部分も変数にします。
10 は移動距離(移動速度)ともいえるので、velocityX、velocityYとします。

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

var x = 50;
var y = 50;

var velocityX = 10;
var velocityY = 10;
   
ctx.fillText('M', x, y);
ctx.fillText('M', x + velocityX, y + velocityY);
ctx.fillText('M', x + velocityX  + velocityX , y + velocityY + velocityY);

今のコードでは描画する際に、X座標とy座標を決定していますが、「座標を更新する処理」と「描画処理」を分けます。

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

var x = 50;
var y = 50;

var velocityX = 10;
var velocityY = 10;

ctx.fillText('M', x, y); //初期位置の M を描画

x = x + velocityX; //更新処理
y = y + velocityY; //更新処理
ctx.fillText('M', x, y); //描画処理

x = x + velocityX; //更新処理
y = y + velocityY; //更新処理
ctx.fillText('M', x, y); //描画処理

同じ処理を関数にする

更新処理と描画処理のセットは毎回同じなので、関数にします。
関数にすることで、簡単に再利用できます。

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

var x = 50;
var y = 50;

var velocityX = 10;
var velocityY = 10;

ctx.fillText('M', x, y); //初期位置の M を描画

//更新処理と描画処理を再利用できるように関数として定義する
function animate(){
 x = x + velocityX; //更新処理
 y = y + velocityY; //更新処理
 ctx.fillText('M', x, y); //描画処理
}

animate();
animate();
animate();

関数を一定間隔で呼び出す

setInterval(<関数名>, <呼び出す間隔>) を使い、animate 関数を 200ミリ秒ごとに呼び出すようにします。

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

var x = 50;
var y = 50;

var velocityX = 10;
var velocityY = 10;

ctx.fillText('M', x, y); //初期位置の M を描画

//更新処理と描画処理を再利用できるように関数として定義する
function animate(){
 x = x + velocityX; //更新処理
 y = y + velocityY; //更新処理
 ctx.fillText('M', x, y); //描画処理
}

setInterval(animate, 200);

コードを改善する前と後では、だいぶすっきりしました。
また、処理を関数化することで、その処理を再利用できるようになりました。

次回は、この処理をアニメーションっぽくします。

2 thoughts on “html5のCanvasを使ってアニメーションを作る2

  1. Pingback: html5のCanvasを使ってアニメーションを作る3

  2. Pingback: html5のCanvasを使ってアニメーションを作る3 | ラシュリエ有限責任事業組合

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です