面向对象+canvas 倒计时

　　效果参照网上的，用面向对象改写了一下，只写了自己需要的部分。

1、效果：

实现：

//html
<canvas id="canvas" width="800px" height="500px"></canvas>

//js
;(function(win, undefined) {
    function AtomCountdown(num) {
        this.WINDOW_WIDTH = 0; //可视
        this.WINDOW_HEIGHT = 0;
        this.RADIUS = 10; //小球半径
        this.numArr = [
            [
                [0, 0, 1, 1, 1, 0, 0],
                [0, 1, 1, 0, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 0, 1, 1, 0],
                [0, 0, 1, 1, 1, 0, 0]
            ], //0
            [
                [0, 0, 0, 1, 1, 0, 0],
                [0, 1, 1, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [1, 1, 1, 1, 1, 1, 1]
            ], //1
            [
                [0, 1, 1, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 1, 1, 0, 0, 0, 0],
                [1, 1, 0, 0, 0, 0, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 1, 1, 1, 1, 1]
            ], //2
            [
                [1, 1, 1, 1, 1, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 1, 1, 1, 0, 0],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0]
            ], //3
            [
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 1, 0],
                [0, 0, 1, 1, 1, 1, 0],
                [0, 1, 1, 0, 1, 1, 0],
                [1, 1, 0, 0, 1, 1, 0],
                [1, 1, 1, 1, 1, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 1, 1]
            ], //4
            [
                [1, 1, 1, 1, 1, 1, 1],
                [1, 1, 0, 0, 0, 0, 0],
                [1, 1, 0, 0, 0, 0, 0],
                [1, 1, 1, 1, 1, 1, 0],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0]
            ], //5
            [
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 1, 1, 0, 0, 0, 0],
                [1, 1, 0, 0, 0, 0, 0],
                [1, 1, 0, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0]
            ], //6
            [
                [1, 1, 1, 1, 1, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 0, 1, 1, 0, 0, 0]
            ], //7
            [
                [0, 1, 1, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0]
            ], //8
            [
                [0, 1, 1, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 1, 1, 0, 0, 0, 0]
            ] //9
        ];
        this.balls = [];
        this.colors = ["#CC9933", "#FF9900", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33"]; //小球颜色
        this.context = '';
        this.pos_left = 0;
        this.pos_top = 0;
        this.timer1 = null;
        this.timer2 = null;
        this.num = num; //倒计时 0-9
        this.init(); //初始化
    }
    AtomCountdown.prototype = {
        constructor: AtomCountdown,
        init: function() {
            this.WINDOW_WIDTH = document.documentElement.clientWidth;
            this.WINDOW_HEIGHT = document.documentElement.clientHeight;

            var canvas = document.getElementById('canvas');
            this.context = canvas.getContext("2d");
            this.pos_left = canvas.width / 2 - 100;
            this.pos_top = canvas.height / 2 - 100;

            var timer1 = setInterval(
                function() {
                    this.render(this.context, this.pos_left, this.pos_top);
                    this.updateBalls();
                }.bind(this), 100);

            var timer2 = setInterval(function() {
                if (this.num >= 0) {
                    this.addBalls(this.pos_left, this.pos_top, this.num);
                    this.num--;
                }
                if (this.num < 0) {
                    clearInterval(timer2);
                    clearInterval(timer1);
                    this.closeAll();
                }
            }.bind(this), 1000);
        },
        updateBalls: function() {
            for (var i = 0; i < this.balls.length; i++) {

                this.balls[i].x += this.balls[i].vx;

                var c = 1.0;
                if (this.balls[i].y + this.RADIUS + this.balls[i].vy >= this.WINDOW_HEIGHT) {
                    c = (this.WINDOW_HEIGHT - (this.balls[i].y + this.RADIUS)) / this.balls[i].vy;
                }

                this.balls[i].y += this.balls[i].vy;
                this.balls[i].vy += c * this.balls[i].g;;

                if (this.balls[i].y >= this.WINDOW_HEIGHT - this.RADIUS) {
                    this.balls[i].y = this.WINDOW_HEIGHT - this.RADIUS;
                    this.balls[i].vy = -Math.abs(this.balls[i].vy);
                }
            }

            var cnt = 0
            for (var i = 0; i < this.balls.length; i++) {
                if (this.balls[i].x + this.RADIUS > 0 && this.balls[i].x - this.RADIUS < this.WINDOW_WIDTH) {
                    this.balls[cnt++] = this.balls[i];
                }
            }

            while (this.balls.length > cnt) {
                this.balls.pop();
            }
        },
        addBalls: function(x, y, num) {
            for (var i = 0; i < this.numArr[num].length; i++)
                for (var j = 0; j < this.numArr[num][i].length; j++)
                    if (this.numArr[num][i][j] == 1) {
                        var aBall = {
                            x: x + j * 2 * this.RADIUS + this.RADIUS,
                            y: y + i * 2 * this.RADIUS + this.RADIUS,
                            g: 2 + Math.random(),
                            vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 5,
                            vy: -10,
                            color: this.colors[Math.floor(Math.random() * this.colors.length)]
                        }

                        this.balls.push(aBall)
                    }
        },
        render: function(cxt, left, top) {

            cxt.clearRect(0, 0, this.WINDOW_WIDTH, this.WINDOW_HEIGHT);

            //num>=0时候，初始化数字
            this.num >= 0 && this.renderInit(this.pos_left, this.pos_top, this.num, this.context);

            //绘制爆炸的小球
            for (var i = 0; i < this.balls.length; i++) {
                cxt.fillStyle = this.balls[i].color;
                cxt.beginPath();
                cxt.arc(this.balls[i].x, this.balls[i].y, this.RADIUS * 0.8, 0, 2 * Math.PI, true);
                cxt.closePath();

                cxt.fill();
            }
        },
        //绘制初始换的数字
        renderInit: function(x, y, num, cxt) {
            cxt.fillStyle = 'blue';
            for (var i = 0; i < this.numArr[num].length; i++)
                for (var j = 0; j < this.numArr[num][i].length; j++)
                    if (this.numArr[num][i][j] == 1) {
                        cxt.beginPath();
                        cxt.arc(x + j * 2 * (this.RADIUS + 1) + (this.RADIUS + 1), y + i * 2 * (this.RADIUS + 1) + (this.RADIUS + 1), this.RADIUS, 0, 2 * Math.PI)
                        cxt.closePath()
                        cxt.fill()
                    }
        },
        closeAll: function() {
            this.context.clearRect(0, 0, this.WINDOW_WIDTH, this.WINDOW_HEIGHT);
        }
    }
    win.AtomCountdown = AtomCountdown;
})(window)

　　

3、usage

//实例  new AtomCountdown(9)