前回作った雪の軌跡を表示するをアニメーション化してみた。
canvasを使ってarc関数で描かれた雪が、ランダムに一つずつ降ってくる。
雪の落下速度（speed）と揺れ（swing）はランダムに変えている。
やはりsinカーブ通りのきれいなカーブなので、もっと他の要素を加えないと自然に見えないようだ。
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="fallSnow.js"></script>
<title>fallsnow</title>
<style>
body, #canvas {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="320" height="480"></canvas>
</body>
</html>
JavaScript部分
// -------------------------------------------------------------------------
// fallSnow.js
//
// created at 2013-11-25 on take3.asia
// -------------------------------------------------------------------------
/*
* 定数
*/
var SCREEN_WIDTH = 320;
var SCREEN_HEIGHT = 480;
var TICK = 10;
/*
* グローバル変数
*/
var $id = function(id){ return document.getElementById(id); };
var canvas = null; // キャンバス
var g = null; // コンテキスト
var snowX = 0; // 雪のx座標
var snowY = 0; // 雪のy座標
var title; // タイトル文字列
var speed; // 雪の落下速度
var swing; // 雪のゆれ具合
var init = function(){
// パラメタ設定
title = "snow";
speed = Math.floor(Math.random() * 5) + 1; // 落下速度 1～5
swing = Math.floor(Math.random() * 3) + 1; // ゆれ 1～3
// 雪の初期位置
snowX = SCREEN_WIDTH / 3;
snowY = 0;
};
/*
* 描画処理
*/
var draw = function(e){
// 画面をクリア
g.clearRect(0, 0, canvas.width, canvas.height);
// パラメタ表示
g.fillStyle = "rgba(0, 0, 0, 0.5)";
g.fillStyle = "rgba(0, 0, 200, 1.0)";
g.fillText(title, 8, 16);
g.fillText("speed = " + speed, 8, 32);
g.fillText("swing = " + swing, 8, 48);
// 雪を描く
g.beginPath();
g.arc(snowX, snowY, 5, 0, Math.PI*2, false);
g.stroke();
// 次の雪の位置を計算
snowX = snowX + Math.sin((snowY + speed) * Math.PI/180) * swing;
snowY = snowY + speed;
if(snowY > SCREEN_HEIGHT){
init();
}
// アニメーション
setTimeout(draw, TICK);
};
/*
メイン処理
*/
window.onload = function()
{
// キャンバス情報取得
canvas = $id("canvas");
g = canvas.getContext("2d");
// 初期化
init();
// 雪を降らせる
draw();
};
コメント