omas · August 29, 2015 14:07
diff --git a/christmas.html b/christmas.html
 <!DOCTYPE html>
 <html lang="ja">
 <head>
 	<meta charset="UTF-8">
 	<title>Happy Christmas</title>

 	<style>
 		@charset "UTF-8";
 		html { overflow-y: hidden; }
 		body { margin: 0;}
 		body:after {
 			background: url("http://exe.codeprep.jp/assets/files/christmas_tree.png") right center no-repeat;
 			content: "";
 			height: 500px;
 			right: 100px;
 			position: absolute;
 			top: 0;
 			width: 350px;
 			z-index: 10;
 		}

 		#christmas {
 			top: 10px;
 			color: #d8e5f1;
 			font-size: 50px;
 			font-family: Arial;
 			left: 20px;
 			margin: 0;
 			position: absolute;
 			z-index: 10;
 		}
 		
 	</style>
 	<script>

 		window.addEventListener('load' ,function(){
 			var canvas = new Canvas(window.innerWidth,window.innerHeight);
 			var scene = new Scene(canvas);
 			var snows = new Snows(canvas,100);
 			var speed = 40;
 			var id = setInterval(function(){
 				scene.draw();
 				snows.draw();
 			},speed);
 		},false);

 		var Canvas = function(width,height) {
 			this.elem = document.getElementById("canvas");
 			this.width = this.elem.width = width;
 			this.height = this.elem.height = height;
 			this.context = this.elem.getContext("2d");
 		};

 		var Scene = function(canvas) {
 			this.width = canvas.width;
 			this.height = canvas.height;
 			this.color = "#000000";
 			this.context = canvas.context;
 		};

 		Scene.prototype.draw = function() {
 			this.context.beginPath();
 			this.context.fillStyle = this.color;
 			this.context.fillRect(0,0,this.width,this.height);
 		};

 		var Snows = function (canvas,amount){
 			this.list = [];
 			for ( var i = 0; i < amount; i++ ) {
 				this.list.push(new Snow(canvas));
 			}
 		};

 		Snows.prototype.draw = function(){
 			this.list.forEach(function(snow){
 				snow.draw();
 				snow.move();
 			});
 		};

 		var Snow = function(canvas){
 			this.x = Math.random() * canvas.width;
 			this.y = Math.random() * canvas.height;
 			this.vx = Math.random() * 2 - 2;
 			this.vy = Math.random() * 20 + 5;
 			this.radius = Math.random() * 10;
 			this.range = {x:canvas.width,y:canvas.height};
 			this.context = canvas.context;
 		};

 		Snow.prototype.draw = function(){
 			this.context.beginPath();
 			this.context.fillStyle = this.getGradient();
 			this.context.arc(this.x, this.y
 				, this.radius, 0, Math.PI * 2 ,false);
 			this.context.fill();
 		};

 		Snow.prototype.move = function(){
 			this.x += this.vx;
 			this.y += this.vy;
 			if( this.x < -50 ) this.x = this.range.x + 50;
 			if( this.x > this.range.x + 50 ) this.x = -50;
 			if( this.y > this.range.y) this.y = -50;
 		};

 		Snow.prototype.getGradient = function(){
 			var gd = this.context.createRadialGradient(
 				this.x, this.y, 0, this.x, this.y, this.radius);
 			gd.addColorStop(0, "#FFFFFF");
 			gd.addColorStop(0.3, "#FFFFFF");
 			gd.addColorStop(0.3
 				,["rgba(" ,[255,255,255,Math.random()] ,")"].join(""));
 			gd.addColorStop(1.0, "#000000");
 			return gd;
 		};

 	</script>

 </head>
 <body>

 	<h1 id="christmas">Merry Christmas!</h1>
 	<canvas id="canvas">
 		Your Browser does not support canvas.
 	</canvas>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Happy Christmas</title>

	<style>
	@charset "UTF-8";
	html { overflow-y: hidden; }
	body { margin: 0;}
	body:after {
	background: url("http://exe.codeprep.jp/assets/files/christmas_tree.png") right center no-repeat;
	content: "";
	height: 500px;
	right: 100px;
	position: absolute;
	top: 0;
	width: 350px;
	z-index: 10;
	}

	#christmas {
	top: 10px;
	color: #d8e5f1;
	font-size: 50px;
	font-family: Arial;
	left: 20px;
	margin: 0;
	position: absolute;
	z-index: 10;
	}

	</style>
	<script>

	window.addEventListener('load' ,function(){
	var canvas = new Canvas(window.innerWidth,window.innerHeight);
	var scene = new Scene(canvas);
	var snows = new Snows(canvas,100);
	var speed = 40;
	var id = setInterval(function(){
	scene.draw();
	snows.draw();
	},speed);
	},false);

	var Canvas = function(width,height) {
	this.elem = document.getElementById("canvas");
	this.width = this.elem.width = width;
	this.height = this.elem.height = height;
	this.context = this.elem.getContext("2d");
	};

	var Scene = function(canvas) {
	this.width = canvas.width;
	this.height = canvas.height;
	this.color = "#000000";
	this.context = canvas.context;
	};

	Scene.prototype.draw = function() {
	this.context.beginPath();
	this.context.fillStyle = this.color;
	this.context.fillRect(0,0,this.width,this.height);
	};

	var Snows = function (canvas,amount){
	this.list = [];
	for ( var i = 0; i < amount; i++ ) {
	this.list.push(new Snow(canvas));
	}
	};

	Snows.prototype.draw = function(){
	this.list.forEach(function(snow){
	snow.draw();
	snow.move();
	});
	};

	var Snow = function(canvas){
	this.x = Math.random() * canvas.width;
	this.y = Math.random() * canvas.height;
	this.vx = Math.random() * 2 - 2;
	this.vy = Math.random() * 20 + 5;
	this.radius = Math.random() * 10;
	this.range = {x:canvas.width,y:canvas.height};
	this.context = canvas.context;
	};

	Snow.prototype.draw = function(){
	this.context.beginPath();
	this.context.fillStyle = this.getGradient();
	this.context.arc(this.x, this.y
	, this.radius, 0, Math.PI * 2 ,false);
	this.context.fill();
	};

	Snow.prototype.move = function(){
	this.x += this.vx;
	this.y += this.vy;
	if( this.x < -50 ) this.x = this.range.x + 50;
	if( this.x > this.range.x + 50 ) this.x = -50;
	if( this.y > this.range.y) this.y = -50;
	};

	Snow.prototype.getGradient = function(){
	var gd = this.context.createRadialGradient(
	this.x, this.y, 0, this.x, this.y, this.radius);
	gd.addColorStop(0, "#FFFFFF");
	gd.addColorStop(0.3, "#FFFFFF");
	gd.addColorStop(0.3
	,["rgba(" ,[255,255,255,Math.random()] ,")"].join(""));
	gd.addColorStop(1.0, "#000000");
	return gd;
	};

	</script>

	</head>
	<body>

	<h1 id="christmas">Merry Christmas!</h1>
	<canvas id="canvas">
	Your Browser does not support canvas.
	</canvas>

	</body>
	</html>
No results found