HTML5 / Canvas アニメーション


Canvasで30fpsとかで描画するので setInterval 使って定期的に処理。

1
2
var fps = 30; // 秒30フレーム
setInterval(draw, 1000 / fps);

まずは四角でも描画してみます。

1
2
3
4
5
6
7
var canvas = document.getElementById('canvasId');
var context = canvas.getContext('2d');
setInterval(function(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = '#FF0000';
context.fillRect(0, 0, 32, 32);
}, 1000 / fps);

なんか動きをつけたいので、ボタンクリックで動かすことにします。
ついでに諸々ちょっと整理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var canvasAnimation = function(canvasId){
this.fps = 30;
this.color = '#FF0000';
// 四角の位置(初期値 0, 0)
this.x = 0;
this.y = 0;
// 四角のサイズ
this.cell = 32;
// 初期化処理の呼び出し
this.init(canvasId);
};
canvasAnimation.prototype = {
// 初期化処理
init: function(canvasId){
var self = this;
self.canvas = document.getElementById(canvasId);
self.context = self.canvas.getContext('2d');
setInterval(function(){
self.draw();
}, 1000 / self.fps);
},
// 描画処理
draw: function(){
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.fillStyle = this.color;
this.context.fillRect(this.x, this.y, this.cell, this.cell);
},
// 四角形の位置更新
update: function(dx, dy){
var x = this.x + this.cell * dx;
var y = this.y + this.cell * dy;
// 四角形がCanvasからはみ出ない様にする
if (x < 0 || y < 0 || x > this.canvas.width - this.cell || y > this.canvas.height - this.cell) {
return;
}
this.x = x;
this.y = y;
}
};

$(function(){
var ca = new canvasAnimation('canvas');
// 上下左右のボタンで四角形を移動
$('#up').click(function(){
ca.update(0, -1);
});
$('#down').click(function(){
ca.update(0, 1);
});
$('#left').click(function(){
ca.update(-1, 0);
});
$('#right').click(function(){
ca.update(1, 0);
});
});

サンプル

2011.01.07 追記
setInterval より setTimeout の方がアニメーションには向いているかも。もし、処理が重く指定時間内に終わらなかった場合、一定間隔で処理される setInterval だと次の処理が同時進行することになるので。
下記記事とサンプルも参考に。
HTML5 / Canvas キーボード入力

「HTML5 / Canvas アニメーション」への1件のフィードバック

コメントを残す

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