天気がよくて眠くなってしまいます。
さて、HTML5のCanvas APIを試してみました。
作ったものはまあ、見ての通りです。
本当は一緒にWebWorkersも試してみようと思って、いろいろやってみたけど、どうしてもcanvasのHTML要素をWorkerスレッド内でうまく操作できなかったんで、いったん諦めてsetTimeoutを代用しました。きっと何かしら方法があると思うけど・・・。
ちらつきがあったらダブルバッファリングが必要かなと思ってたんだけど、Google Chromeで見る限りちらつきとかは気にならなかったので、とりあえず放置してます。
以前なら画像とか使って作ってたんだけど、canvasを使えばJavaのSwingのように描画できました。
次はWebWorkersについてちゃんと調べてやってみよう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 canvas sample</title>
</head>
<body>
<canvas id="canvas" width="300" height="300" style="border: 1px solid black;"></canvas>
<script>
// 始点
var x0 = 0;
var y0 = 100;
// 初速度
var vx0 = 40;
var vy0 = 40;
// 時刻
var t = 0;
var dt = 0.033; // 刻み
var dmt = dt * 1000;
var pos = [x0,y0];
var cx;
// 座標を取得
function coordinates(x, y) {
return [x + vx0 * dt, y + vy0 * dt];
}
function render() {
// 背景クリア
cx.clearRect(0,0,300,300);
// 描画
cx.fillRect(pos[0], pos[1], 50, 50);
// 時間を進める
t += dt;
// 次座標を取得
pos = coordinates(pos[0],pos[1]);
// 端まで行ったら反転
if(pos[0] < 0 || pos[0] > 250) {
vx0 *= -1;
}
if(pos[1] < 0 || pos[1] > 250) {
vy0 *= -1;
}
setTimeout(render, dmt);
}
// 初期処理
var canvas = document.getElementById('canvas');
cx = canvas.getContext('2d');
cx.fillStyle = 'rgb(255,0,0)'; // 赤
setTimeout(render, dmt);
</script>
</body>
</html>
0 コメント:
コメントを投稿