ゼロからわかる現代JavaScript

ここは、ふぇりあ１６歳が不定期に連載しているオンライン小説のページです。

VNIふぇりあ16歳へ

ゼロからわかる現代JavaScript

５９．キャンバスを使ったアニメ。「canvas」

今回は

待ちに待ったアニメをJavascript + Cnavas(HTML5)で作ってみましょう

DOMでやっていたものをHTML5にしてみたというものです。

歩イントは

・clearRect

clearRectを使うことで、画面を消去します。
引数は、消去する部分の(X座標, Y座標, 横幅, 縦幅)になります。

今回使用するソースコード

//X座標の初期値
var x = 0;

function main() {
//キャンバス要素の作成
var canvas = document.createElement("canvas");
//bodyに要素の追加
document.body.appendChild(canvas);

//コンテキストを取得 2dは2D描画の意味
var ctx = canvas.getContext("2d");

//ループ処理
loop = function () {
　　//位置の加算
　　x += 3;
　　//描画処理
　　draw();

　　tm = setTimeout(loop, 50);
}

loop();

//描画処理
function draw() {
　　//画面の消去
　　ctx.clearRect(0, 0, 600, 500);
　　//四角の描画
　　ctx.beginPath();
　　ctx.rect(x, 20, 100, 80);
　　ctx.fillStyle = "rgb(255, 0, 0)";
　　ctx.fill();
　　ctx.stroke();

　　//文字の描画
　　ctx.fillStyle = "rgb(0, 0, 0)";
　　ctx.fillText("X座標：" + x, 0, 10);

　　}
}

ループ処理の作り方が

変数　＝　無明関数()

という作り方になるのに要注意です。

実行結果

コラム：

HTML5は便利です。Flashのようなオーサリングツールを使わなくても
プログラミングでアニメを作ることができます。ただし描画はかなり遅いので、

まだまだFlashの方が便利かなと思います。
Flashの良さはトゥイーンにあります。

新しく使うならSliverlightのほうが絶対に性能がいいと思います。