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

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)

　　

面向对象+canvas 倒计时的更多相关文章

  1. canvas制作倒计时炫丽效果

    <!DOCTYPE html> <head> <title>canvas倒计时</title> <style> .canvas{ displ ...

  2. 微信小游戏开发Canvas资源汇总

    Demo: 微信小程序demo组件:股票分时图 微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成 微信小程序学习用完整dem ...

  3. 封装 用canvas绘制直线的函数--面向对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. html5 canvas 实现倒计时 功能

    function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...

  5. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  6. canvas，制作炫酷的时钟和倒计时

    html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin ...

  7. 更新——Canvas画布动画效果之实现倒计时

    Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

  8. 从canvas理解面向对象

    前言 据说在编程语言的发展过程中,面向对象语言的出现是为了解决GUI编程的问题而出现的.计算机一开始是用纸带,命令行等来和人进行交互,而图形界面的出现是一次重大的改进,使普通人很容易就能使用计算机. ...

  9. [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

    效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...

随机推荐

  1. cookie中存中文

    cookie中存中文 1:想要在cookie中存中文:需要用到URLEncoder(在jdkAPI中有介绍) Cookie cookie = new Cookie("User",U ...

  2. js回顾（DOM中标签的CRUD，表格等）

    01-DOM中的创建和添加标签 02-删除替换克隆标签 03-全选全不选反选 04-新闻字体 05-表格增删 06-动态生成表格 07-表格隔行变色 08-左到右右到左(将左边的标签移动到右边) 09 ...

  3. gradle入门（1-8）gradle 的依赖查看、依赖排除和指定版本（需要验证！）

    一.依赖查看 gradle dependencies 在gradle dependencies输出会有如下几种标记: 1.版本 : 唯一的依赖. 2.版本():还存在该库其他版本的依赖或者间接依赖,并 ...

  4. Spark入门（1-1）什么是spark，spark和hadoop

    一.Spark是什么? Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎,可用来构建大型的.低延迟的数据分析应用程序. Spark是UC Berkeley AMP lab (加 ...

  5. Hive：动静态分区

    http://hugh-wangp.iteye.com/blog/1612268 http://blog.csdn.net/opensure/article/details/46537969 使用静态 ...

  6. Oracle中如何导出存储过程、函数、包和触发器的定义语句？如何导出表的结构？如何导出索引的创建语句？

    Oracle中如何导出存储过程.函数.包和触发器的定义语句?如何导出表的结构?如何导出索引的创建语句? QQ群里有人问:如何导出一个用户下的存储过程?   麦苗答:方法有多种,可以使用DBMS_MET ...

  7. MySQL表的创建

    第1步:设计 首先要设计一张用于我想要用途的表,例如如下用于描述个人的信息类型: 姓名: 性别: 出生日期: 地址: 最喜爱的食物. 下面为他来指定列和数据类型: 列 | 类型 | 允许值 | - | ...

  8. 学习HTML的第一次课

    1.母板中的标签的含义 1.1< Doctype html/ > 声明文档类型为HTML 1.2< meta charset="UTF-8"/ > 设当前网 ...

  9. leetcode 717. 1-bit and 2-bit Characters -easy

    https://leetcode.com/problems/1-bit-and-2-bit-characters/description/ We have two special characters ...

  10. python学习笔记1--python简介和第一行代码编写

    一.什么是python? python是一种面向对象,解释型语言,它语法简介,容易学习.本节博客就来说说本人学习python的心得体会. 二.python环境安装 目前python版本有python2 ...