今回はcanvasで生成した画像を動かしてみたいと思います。
やり方は基本的には、JavaScriptで描画したcanvas画像を消して、次の画像（座標変更や変形したもの）を描画する作業を繰り返すだけです。
描画1→削除1→描画2→削除2→描画3→削除3→・・・・
一般的なアニメーションと同じ間隔で、描画と削除の繰り返し間隔がフレームレートと言うわけです。
基本サンプル
index.html
<!DOCTYPE html>
<html lang="js">
<head>
<meta charset="utf-8">
<title>canvas plactice</title>
<style type="text/css">
#mycanvas{
/*transform:scale(0.5 , 1);*/
border:1px solid black;
}
</style>
</head>
<body>
<h1>Canvas Animation</h1>
<canvas id="mycanvas" width="400" height="200">
not canvas
</canvas>
<script src="canvas.js"></script>
</body>
</html>
canvas.js
(function(){
//Canvas要素の定義
var cs = document.getElementById('mycanvas');
var ctx = cs.getContext('2d');
//キャンバスサイズ
var w = cs.width;
var h = cs.height;
//開始位置
var x = 0;
var y = 10
//描画
function view() {
//最初に表示を削除するクリア処理を行う
ctx.clearRect(0, 0, w, h);
ctx.beginPath();
//四角形の描画
ctx.strokeRect(x, y, 30, 30);
// 四角形のx座標がCanvasの横幅を超えたら初期位置(x座標を0)へ移動
if (x > cs.width) {
x = 0;
}
//そうでなければ、x座標を増やす
else {
x += 10;
}
}
//100ミリ秒ごとに、描画フローを繰り返す（秒間10フレーム）
setInterval(view, 100);
})();
プレビュー
とりあえず、簡単なアニメーションですが、複雑なものは描画を細分化して関数化したりしながら設計するといいでしょう。
0 件のコメント:
コメントを投稿