hinaloe/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>映画とJS</title>
    <style>
        #container {
            text-align: center;
        }
        #mycanvas {
            background: #ecf0f1;
            cursor: crosshair;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="mycanvas" width="750" height="500">
            Canvasに対応したブラウザを用意してください。
        </canvas>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        var ctx;

        var canvas = document.getElementById('mycanvas');
        ctx = canvas.getContext('2d');

        // 数字オブジェクトを作成する
        var Number = function(x, y) {
            // 数字の座標の位置
            this.x = 100;
            this.y = 20;
            // 数字の落下速度
            this.vy = 10;

            // 数字の描画
            this.draw = function() {
                ctx.font = '20px Verdana';
                ctx.fillStyle = '#000000';
                ctx.fillText('1', this.x, this.y);
            }

            // 数字の落下
            this.move = function() {
                this.y += this.vy;
            }

            // キャンバスの初期化
            this.clear = function() {
                ctx.fillStyle = '#ecf0f1';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
            }

        }

        // インスタンスの生成
        var n = new Number();

		//n.draw();
        // 数字の落下関数
        function update() {
            setInterval(function() {
                n.clear();
                n.draw();
                n.move();
           }, 1000);
        }

        // 数字の落下開始
        update();

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>映画とJS</title>
	<style>
	#container {
	text-align: center;
	}
	#mycanvas {
	background: #ecf0f1;
	cursor: crosshair;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<canvas id="mycanvas" width="750" height="500">
	Canvasに対応したブラウザを用意してください。
	</canvas>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	var ctx;

	var canvas = document.getElementById('mycanvas');
	ctx = canvas.getContext('2d');

	// 数字オブジェクトを作成する
	var Number = function(x, y) {
	// 数字の座標の位置
	this.x = 100;
	this.y = 20;
	// 数字の落下速度
	this.vy = 10;

	// 数字の描画
	this.draw = function() {
	ctx.font = '20px Verdana';
	ctx.fillStyle = '#000000';
	ctx.fillText('1', this.x, this.y);
	}

	// 数字の落下
	this.move = function() {
	this.y += this.vy;
	}

	// キャンバスの初期化
	this.clear = function() {
	ctx.fillStyle = '#ecf0f1';
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	}

	}

	// インスタンスの生成
	var n = new Number();

	//n.draw();
	// 数字の落下関数
	function update() {
	setInterval(function() {
	n.clear();
	n.draw();
	n.move();
	}, 1000);
	}

	// 数字の落下開始
	update();

	</script>
	</body>
	</html>