DIR : /home/kozerus/public_html/jkwii/js/jsdoit/Web-Creato/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/Web-Creato

var fountain = {
	//水玉の数（多いほど重い）
	'count' : 500,
	//重力（大きいほど強い）
	'gravity' : 0.2,
	//水玉の大きさ
	'radius' : 2,
	//水玉の減衰値（0で減衰なし）
	'alpha' : '0.08',
};

//描画フレームごとに呼び出されるfunction
function drowCanvas () {
	fountain.particles.update();

	fountain.particles.drow();

	//毎フレームごとに全体へalphaをかけることで全体を徐々に透過させる
	fountain.context.fillStyle = 'rgba(256, 256, 256, '+fountain.alpha+')';
	fountain.context.fillRect(0, 0, fountain.width, fountain.height);
	//描画頻度
	setTimeout(function () {
		requestAnimationFrame(drowCanvas);
	}, 10); // 表示が重い場合はこの数字を増やす
}

//水玉配列の初期化
function Particles () {
	particles = [];
	var count = fountain.count;
	while (count--) {
		var p = {};
		p.radius = fountain.radius;
		//水玉の色
		p.color = 'rgba('
			// red
			+ 0 + ','
			// green
			+ ((Math.random() * 255 / 8)|0) + ','
			// blue
			+ ((Math.random() * 255 / 2)|0) + ','
			// alpha
			+ Math.random() +
		')';
		p.vx = Math.random() * 4 - 2;
		p.vy = Math.random() * -10 - 10;
		this.init_position(p);
		particles.push(p);
	}
	this.particles = particles;
};
//水玉の位置初期化
Particles.prototype.init_position = function (p) {
	//表示位置をcanvasの中心下部へ
	p.x = (fountain.width / 2)|0;
	p.y = fountain.height;
	//水玉の加速度
	p.vx = Math.random() * 4 - 2;
	p.vy = Math.random() * -10 - 10;
};
//水玉の位置更新
Particles.prototype.update = function () {
	var particles = this.particles;
	for (var i = 0, l = particles.length; i < l; ++i) {
		var p = particles[i];
		//加速度に重力を加算
		p.vy += fountain.gravity;
		p.x += p.vx;
		p.y += p.vy;
		var w_out = p.x - p.radius > fountain.width  || p.x + p.radius < 0;
		var h_out = p.y - p.radius > fountain.height || p.y + p.radius < 0;
		//画面から外れた場合、位置を初期化して再利用
		if (w_out || h_out) {
			this.init_position(p);
		}
	}
};
//水玉の描画
Particles.prototype.drow = function () {
	var particles = this.particles;
	var ctx = fountain.context;
	for (var i = 0, l = particles.length; i < l; ++i) {
		var p = particles[i];
		ctx.beginPath();
		ctx.fillStyle = p.color;
		ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, true);
		ctx.fill();
	}
};

document.addEventListener('DOMContentLoaded', function () {
	var canvas = document.getElementById('fountain');
	//canvasサイズを画面サイズにfit
	(function () {
		var b = document.body;
		var d = document.documentElement;
		canvas.width = Math.max(b.clientWidth , b.scrollWidth, d.scrollWidth, d.clientWidth);
		canvas.height = Math.max(b.clientHeight , b.scrollHeight, d.scrollHeight, d.clientHeight);
	})();
	fountain.context = canvas.getContext('2d');
	fountain.width = canvas.width;
	fountain.height = canvas.height;
	fountain.particles = new Particles(fountain.count, fountain.width, fountain.height);
	requestAnimationFrame(drowCanvas);
}, false);

//set window.requestAnimationFrame
(function (w, r) {
	w['r'+r] = w['r'+r] || w['webkitR'+r] || w['mozR'+r] || w['msR'+r] || w['oR'+r] || function(c){ w.setTimeout(c, 1000 / 60); };
})(window, 'equestAnimationFrame');