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

1、效果：

实现：

  1. //html
  2. <canvas id="canvas" width="800px" height="500px"></canvas>
  3.  
  4. //js
  5. ;(function(win, undefined) {
  6.     function AtomCountdown(num) {
  7.         this.WINDOW_WIDTH = 0; //可视
  8.         this.WINDOW_HEIGHT = 0;
  9.         this.RADIUS = 10; //小球半径
  10.         this.numArr = [
  11.             [
  12.                 [0, 0, 1, 1, 1, 0, 0],
  13.                 [0, 1, 1, 0, 1, 1, 0],
  14.                 [1, 1, 0, 0, 0, 1, 1],
  15.                 [1, 1, 0, 0, 0, 1, 1],
  16.                 [1, 1, 0, 0, 0, 1, 1],
  17.                 [1, 1, 0, 0, 0, 1, 1],
  18.                 [1, 1, 0, 0, 0, 1, 1],
  19.                 [1, 1, 0, 0, 0, 1, 1],
  20.                 [0, 1, 1, 0, 1, 1, 0],
  21.                 [0, 0, 1, 1, 1, 0, 0]
  22.             ], //0
  23.             [
  24.                 [0, 0, 0, 1, 1, 0, 0],
  25.                 [0, 1, 1, 1, 1, 0, 0],
  26.                 [0, 0, 0, 1, 1, 0, 0],
  27.                 [0, 0, 0, 1, 1, 0, 0],
  28.                 [0, 0, 0, 1, 1, 0, 0],
  29.                 [0, 0, 0, 1, 1, 0, 0],
  30.                 [0, 0, 0, 1, 1, 0, 0],
  31.                 [0, 0, 0, 1, 1, 0, 0],
  32.                 [0, 0, 0, 1, 1, 0, 0],
  33.                 [1, 1, 1, 1, 1, 1, 1]
  34.             ], //1
  35.             [
  36.                 [0, 1, 1, 1, 1, 1, 0],
  37.                 [1, 1, 0, 0, 0, 1, 1],
  38.                 [0, 0, 0, 0, 0, 1, 1],
  39.                 [0, 0, 0, 0, 1, 1, 0],
  40.                 [0, 0, 0, 1, 1, 0, 0],
  41.                 [0, 0, 1, 1, 0, 0, 0],
  42.                 [0, 1, 1, 0, 0, 0, 0],
  43.                 [1, 1, 0, 0, 0, 0, 0],
  44.                 [1, 1, 0, 0, 0, 1, 1],
  45.                 [1, 1, 1, 1, 1, 1, 1]
  46.             ], //2
  47.             [
  48.                 [1, 1, 1, 1, 1, 1, 1],
  49.                 [0, 0, 0, 0, 0, 1, 1],
  50.                 [0, 0, 0, 0, 1, 1, 0],
  51.                 [0, 0, 0, 1, 1, 0, 0],
  52.                 [0, 0, 1, 1, 1, 0, 0],
  53.                 [0, 0, 0, 0, 1, 1, 0],
  54.                 [0, 0, 0, 0, 0, 1, 1],
  55.                 [0, 0, 0, 0, 0, 1, 1],
  56.                 [1, 1, 0, 0, 0, 1, 1],
  57.                 [0, 1, 1, 1, 1, 1, 0]
  58.             ], //3
  59.             [
  60.                 [0, 0, 0, 0, 1, 1, 0],
  61.                 [0, 0, 0, 1, 1, 1, 0],
  62.                 [0, 0, 1, 1, 1, 1, 0],
  63.                 [0, 1, 1, 0, 1, 1, 0],
  64.                 [1, 1, 0, 0, 1, 1, 0],
  65.                 [1, 1, 1, 1, 1, 1, 1],
  66.                 [0, 0, 0, 0, 1, 1, 0],
  67.                 [0, 0, 0, 0, 1, 1, 0],
  68.                 [0, 0, 0, 0, 1, 1, 0],
  69.                 [0, 0, 0, 1, 1, 1, 1]
  70.             ], //4
  71.             [
  72.                 [1, 1, 1, 1, 1, 1, 1],
  73.                 [1, 1, 0, 0, 0, 0, 0],
  74.                 [1, 1, 0, 0, 0, 0, 0],
  75.                 [1, 1, 1, 1, 1, 1, 0],
  76.                 [0, 0, 0, 0, 0, 1, 1],
  77.                 [0, 0, 0, 0, 0, 1, 1],
  78.                 [0, 0, 0, 0, 0, 1, 1],
  79.                 [0, 0, 0, 0, 0, 1, 1],
  80.                 [1, 1, 0, 0, 0, 1, 1],
  81.                 [0, 1, 1, 1, 1, 1, 0]
  82.             ], //5
  83.             [
  84.                 [0, 0, 0, 0, 1, 1, 0],
  85.                 [0, 0, 1, 1, 0, 0, 0],
  86.                 [0, 1, 1, 0, 0, 0, 0],
  87.                 [1, 1, 0, 0, 0, 0, 0],
  88.                 [1, 1, 0, 1, 1, 1, 0],
  89.                 [1, 1, 0, 0, 0, 1, 1],
  90.                 [1, 1, 0, 0, 0, 1, 1],
  91.                 [1, 1, 0, 0, 0, 1, 1],
  92.                 [1, 1, 0, 0, 0, 1, 1],
  93.                 [0, 1, 1, 1, 1, 1, 0]
  94.             ], //6
  95.             [
  96.                 [1, 1, 1, 1, 1, 1, 1],
  97.                 [1, 1, 0, 0, 0, 1, 1],
  98.                 [0, 0, 0, 0, 1, 1, 0],
  99.                 [0, 0, 0, 0, 1, 1, 0],
  100.                 [0, 0, 0, 1, 1, 0, 0],
  101.                 [0, 0, 0, 1, 1, 0, 0],
  102.                 [0, 0, 1, 1, 0, 0, 0],
  103.                 [0, 0, 1, 1, 0, 0, 0],
  104.                 [0, 0, 1, 1, 0, 0, 0],
  105.                 [0, 0, 1, 1, 0, 0, 0]
  106.             ], //7
  107.             [
  108.                 [0, 1, 1, 1, 1, 1, 0],
  109.                 [1, 1, 0, 0, 0, 1, 1],
  110.                 [1, 1, 0, 0, 0, 1, 1],
  111.                 [1, 1, 0, 0, 0, 1, 1],
  112.                 [0, 1, 1, 1, 1, 1, 0],
  113.                 [1, 1, 0, 0, 0, 1, 1],
  114.                 [1, 1, 0, 0, 0, 1, 1],
  115.                 [1, 1, 0, 0, 0, 1, 1],
  116.                 [1, 1, 0, 0, 0, 1, 1],
  117.                 [0, 1, 1, 1, 1, 1, 0]
  118.             ], //8
  119.             [
  120.                 [0, 1, 1, 1, 1, 1, 0],
  121.                 [1, 1, 0, 0, 0, 1, 1],
  122.                 [1, 1, 0, 0, 0, 1, 1],
  123.                 [1, 1, 0, 0, 0, 1, 1],
  124.                 [0, 1, 1, 1, 0, 1, 1],
  125.                 [0, 0, 0, 0, 0, 1, 1],
  126.                 [0, 0, 0, 0, 0, 1, 1],
  127.                 [0, 0, 0, 0, 1, 1, 0],
  128.                 [0, 0, 0, 1, 1, 0, 0],
  129.                 [0, 1, 1, 0, 0, 0, 0]
  130.             ] //9
  131.         ];
  132.         this.balls = [];
  133.         this.colors = ["#CC9933", "#FF9900", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33"]; //小球颜色
  134.         this.context = '';
  135.         this.pos_left = 0;
  136.         this.pos_top = 0;
  137.         this.timer1 = null;
  138.         this.timer2 = null;
  139.         this.num = num; //倒计时 0-9
  140.         this.init(); //初始化
  141.     }
  142.     AtomCountdown.prototype = {
  143.         constructor: AtomCountdown,
  144.         init: function() {
  145.             this.WINDOW_WIDTH = document.documentElement.clientWidth;
  146.             this.WINDOW_HEIGHT = document.documentElement.clientHeight;
  147.  
  148.             var canvas = document.getElementById('canvas');
  149.             this.context = canvas.getContext("2d");
  150.             this.pos_left = canvas.width / 2 - 100;
  151.             this.pos_top = canvas.height / 2 - 100;
  152.  
  153.             var timer1 = setInterval(
  154.                 function() {
  155.                     this.render(this.context, this.pos_left, this.pos_top);
  156.                     this.updateBalls();
  157.                 }.bind(this), 100);
  158.  
  159.             var timer2 = setInterval(function() {
  160.                 if (this.num >= 0) {
  161.                     this.addBalls(this.pos_left, this.pos_top, this.num);
  162.                     this.num--;
  163.                 }
  164.                 if (this.num < 0) {
  165.                     clearInterval(timer2);
  166.                     clearInterval(timer1);
  167.                     this.closeAll();
  168.                 }
  169.             }.bind(this), 1000);
  170.         },
  171.         updateBalls: function() {
  172.             for (var i = 0; i < this.balls.length; i++) {
  173.  
  174.                 this.balls[i].x += this.balls[i].vx;
  175.  
  176.                 var c = 1.0;
  177.                 if (this.balls[i].y + this.RADIUS + this.balls[i].vy >= this.WINDOW_HEIGHT) {
  178.                     c = (this.WINDOW_HEIGHT - (this.balls[i].y + this.RADIUS)) / this.balls[i].vy;
  179.                 }
  180.  
  181.                 this.balls[i].y += this.balls[i].vy;
  182.                 this.balls[i].vy += c * this.balls[i].g;;
  183.  
  184.                 if (this.balls[i].y >= this.WINDOW_HEIGHT - this.RADIUS) {
  185.                     this.balls[i].y = this.WINDOW_HEIGHT - this.RADIUS;
  186.                     this.balls[i].vy = -Math.abs(this.balls[i].vy);
  187.                 }
  188.             }
  189.  
  190.             var cnt = 0
  191.             for (var i = 0; i < this.balls.length; i++) {
  192.                 if (this.balls[i].x + this.RADIUS > 0 && this.balls[i].x - this.RADIUS < this.WINDOW_WIDTH) {
  193.                     this.balls[cnt++] = this.balls[i];
  194.                 }
  195.             }
  196.  
  197.             while (this.balls.length > cnt) {
  198.                 this.balls.pop();
  199.             }
  200.         },
  201.         addBalls: function(x, y, num) {
  202.             for (var i = 0; i < this.numArr[num].length; i++)
  203.                 for (var j = 0; j < this.numArr[num][i].length; j++)
  204.                     if (this.numArr[num][i][j] == 1) {
  205.                         var aBall = {
  206.                             x: x + j * 2 * this.RADIUS + this.RADIUS,
  207.                             y: y + i * 2 * this.RADIUS + this.RADIUS,
  208.                             g: 2 + Math.random(),
  209.                             vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 5,
  210.                             vy: -10,
  211.                             color: this.colors[Math.floor(Math.random() * this.colors.length)]
  212.                         }
  213.  
  214.                         this.balls.push(aBall)
  215.                     }
  216.         },
  217.         render: function(cxt, left, top) {
  218.  
  219.             cxt.clearRect(0, 0, this.WINDOW_WIDTH, this.WINDOW_HEIGHT);
  220.  
  221.             //num>=0时候，初始化数字
  222.             this.num >= 0 && this.renderInit(this.pos_left, this.pos_top, this.num, this.context);
  223.  
  224.             //绘制爆炸的小球
  225.             for (var i = 0; i < this.balls.length; i++) {
  226.                 cxt.fillStyle = this.balls[i].color;
  227.                 cxt.beginPath();
  228.                 cxt.arc(this.balls[i].x, this.balls[i].y, this.RADIUS * 0.8, 0, 2 * Math.PI, true);
  229.                 cxt.closePath();
  230.  
  231.                 cxt.fill();
  232.             }
  233.         },
  234.         //绘制初始换的数字
  235.         renderInit: function(x, y, num, cxt) {
  236.             cxt.fillStyle = 'blue';
  237.             for (var i = 0; i < this.numArr[num].length; i++)
  238.                 for (var j = 0; j < this.numArr[num][i].length; j++)
  239.                     if (this.numArr[num][i][j] == 1) {
  240.                         cxt.beginPath();
  241.                         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)
  242.                         cxt.closePath()
  243.                         cxt.fill()
  244.                     }
  245.         },
  246.         closeAll: function() {
  247.             this.context.clearRect(0, 0, this.WINDOW_WIDTH, this.WINDOW_HEIGHT);
  248.         }
  249.     }
  250.     win.AtomCountdown = AtomCountdown;
  251. })(window)

　　

3、usage

  1. //实例  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. GIT入门笔记（4）- GIT 安装

    关于Windows下的安装工具-msysgit Windows下要使用很多Linux/Unix的工具时,需要Cygwin这样的模拟环境,Git也一样. Cygwin的安装和配置都比较复杂,不建议直接折 ...

  2. YML（1）什么是 YML

    YAML(IPA: /ˈjæməl/,尾音类似camel骆驼) YAML 是一个可读性高,用来表达资料序列的编程语言. YAML参考了其他多种语言,包括:XML.C语言.Python.Perl以及电子 ...

  3. 从零开始：一个正式的vue+webpack项目的目录结构是怎么形成的

    如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...

  4. codeforces 798c Mike And Gcd Problem

    题意: 给出一个数列,现在有一种操作,可以任何一个a[i],用a[i] – a[i+1]和a[i]+a[i+1]替代a[i]和a[i+1]. 问现在需要最少多少次操作,使得整个数列的gcd大于1. 思 ...

  5. Http post请求数据分析 --作者, 你的这个需求我可以做, 我在平台上无法给你发消息和接收你的任务, 所以,如果你看到这个信息, 可以联系我.

    Http post请求数据分析 作者, 你的这个需求我可以做, 我在平台上无法给你发消息和接收你的任务, 所以,如果你看到这个信息, 可以联系我. 软件需求就是不停post一个网址,然后根据返回的信息 ...

  6. Hadoop MR编程

    Hadoop开发job需要定一个Map/Reduce/Job(启动MR job,并传入参数信息),以下代码示例实现的功能: 1)将一个用逗号分割的文件,替换为“|”分割的文件: 2)对小文件合并,将文 ...

  7. [转][scrapy] CannotListenError: Couldn’t listen on [Errno 98] Address already in use.

    [scrapy] CannotListenError: Couldn't listen on [Errno 98] Address already in use. python  eason  1年前 ...

  8. 使用requirejs来管理angularJS依赖示例

    有关requirejs是什么在这里不做解释,只用纯代码实战让你感受requirejs依赖管理的强大. 一.首先要先下载require.js,然后整一个入口文件main.js包括了对其他js的引用. / ...

  9. Python进阶_mysql(1)

    什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据. 进入mysql (linux ...

  10. .Net Core 学习之路-基础

    .Net Core出来好久了,一直在了解,但始终没有应用到实际项目中.... 准备用.net core搞个SSO,才发现它和.net framework的变化并不是一点点... .net core还在 ...