http://blog.ecoteki.com/webservice/post-2604/

<!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>

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js