先给大家贴一张图片，因为我不会上传视频(￣□￣｜｜) ，请大家谅解了~  如果有知道怎么上传视频的大神还请指点指点 ^_^ ~

然后看一下代码:

html部分 : 

  1.  <!DOCTYPE html>
  2.  <html lang="en" style="height: 100%">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>倒计时</title>
  9.  </head>
  10.  
  11.  <body style="height:96%">
  12.      <canvas id="canvas" style="height: 100%"></canvas>
  13.  </body>
  14.  
  15.  </html>
  16.  <script src="./digit.js"></script>

然后需要引入来控制小球位置来构成数字,来看一张图片:看到这张图片，想必大家就会明白了我们需要引入的数据结构。

看一下需要引入的digit.js的代码:

  1.  digit = [
  2.      [
  3.          [0, 0, 1, 1, 1, 0, 0],
  4.          [0, 1, 1, 0, 1, 1, 0],
  5.          [1, 1, 0, 0, 0, 1, 1],
  6.          [1, 1, 0, 0, 0, 1, 1],
  7.          [1, 1, 0, 0, 0, 1, 1],
  8.          [1, 1, 0, 0, 0, 1, 1],
  9.          [1, 1, 0, 0, 0, 1, 1],
  10.          [1, 1, 0, 0, 0, 1, 1],
  11.          [0, 1, 1, 0, 1, 1, 0],
  12.          [0, 0, 1, 1, 1, 0, 0],
  13.      ],  //
  14.      [
  15.          [0, 0, 0, 1, 1, 0, 0],
  16.          [0, 1, 1, 1, 1, 0, 0],
  17.          [0, 0, 0, 1, 1, 0, 0],
  18.          [0, 0, 0, 1, 1, 0, 0],
  19.          [0, 0, 0, 1, 1, 0, 0],
  20.          [0, 0, 0, 1, 1, 0, 0],
  21.          [0, 0, 0, 1, 1, 0, 0],
  22.          [0, 0, 0, 1, 1, 0, 0],
  23.          [0, 0, 0, 1, 1, 0, 0],
  24.          [1, 1, 1, 1, 1, 1, 1],
  25.      ],  //
  26.      [
  27.          [0, 1, 1, 1, 1, 1, 0],
  28.          [1, 1, 0, 0, 0, 1, 1],
  29.          [0, 0, 0, 0, 0, 1, 1],
  30.          [0, 0, 0, 0, 1, 1, 0],
  31.          [0, 0, 0, 1, 1, 0, 0],
  32.          [0, 0, 1, 1, 0, 0, 0],
  33.          [0, 1, 1, 0, 0, 0, 0],
  34.          [1, 1, 0, 0, 0, 0, 0],
  35.          [1, 1, 0, 0, 0, 1, 1],
  36.          [1, 1, 1, 1, 1, 1, 1],
  37.      ],  //
  38.      [
  39.          [1, 1, 1, 1, 1, 1, 1],
  40.          [0, 0, 0, 0, 0, 1, 1],
  41.          [0, 0, 0, 0, 1, 1, 0],
  42.          [0, 0, 0, 1, 1, 0, 0],
  43.          [0, 0, 1, 1, 0, 0, 0],
  44.          [0, 0, 0, 0, 1, 1, 0],
  45.          [0, 0, 0, 0, 0, 1, 1],
  46.          [0, 0, 0, 0, 0, 1, 1],
  47.          [1, 1, 0, 0, 0, 1, 1],
  48.          [0, 1, 1, 1, 1, 1, 0],
  49.      ],  //
  50.      [
  51.          [0, 0, 0, 0, 1, 1, 0],
  52.          [0, 0, 0, 1, 1, 1, 0],
  53.          [0, 0, 1, 1, 1, 1, 0],
  54.          [0, 1, 1, 0, 1, 1, 0],
  55.          [1, 1, 0, 0, 1, 1, 0],
  56.          [1, 1, 1, 1, 1, 1, 1],
  57.          [0, 0, 0, 0, 1, 1, 0],
  58.          [0, 0, 0, 0, 1, 1, 0],
  59.          [0, 0, 0, 0, 1, 1, 0],
  60.          [0, 0, 0, 1, 1, 1, 1],
  61.      ],  //
  62.      [
  63.          [1, 1, 1, 1, 1, 1, 1],
  64.          [1, 1, 0, 0, 0, 0, 0],
  65.          [1, 1, 0, 0, 0, 0, 0],
  66.          [1, 1, 1, 1, 1, 1, 0],
  67.          [0, 0, 0, 0, 0, 1, 1],
  68.          [0, 0, 0, 0, 0, 1, 1],
  69.          [0, 0, 0, 0, 0, 1, 1],
  70.          [0, 0, 0, 0, 0, 1, 1],
  71.          [1, 1, 0, 0, 0, 1, 1],
  72.          [0, 1, 1, 1, 1, 1, 0],
  73.      ],  //
  74.      [
  75.          [0, 0, 0, 0, 1, 1, 0],
  76.          [0, 0, 1, 1, 0, 0, 0],
  77.          [0, 1, 1, 0, 0, 0, 0],
  78.          [1, 1, 0, 0, 0, 0, 0],
  79.          [1, 1, 0, 1, 1, 1, 0],
  80.          [1, 1, 0, 0, 0, 1, 1],
  81.          [1, 1, 0, 0, 0, 1, 1],
  82.          [1, 1, 0, 0, 0, 1, 1],
  83.          [1, 1, 0, 0, 0, 1, 1],
  84.          [0, 1, 1, 1, 1, 1, 0],
  85.      ],  //
  86.      [
  87.          [1, 1, 1, 1, 1, 1, 1],
  88.          [1, 1, 0, 0, 0, 1, 1],
  89.          [0, 0, 0, 0, 1, 1, 0],
  90.          [0, 0, 0, 0, 1, 1, 0],
  91.          [0, 0, 0, 1, 1, 0, 0],
  92.          [0, 0, 0, 1, 1, 0, 0],
  93.          [0, 0, 1, 1, 0, 0, 0],
  94.          [0, 0, 1, 1, 0, 0, 0],
  95.          [0, 0, 1, 1, 0, 0, 0],
  96.          [0, 0, 1, 1, 0, 0, 0],
  97.      ],  //
  98.      [
  99.          [0, 1, 1, 1, 1, 1, 0],
  100.          [1, 1, 0, 0, 0, 1, 1],
  101.          [1, 1, 0, 0, 0, 1, 1],
  102.          [1, 1, 0, 0, 0, 1, 1],
  103.          [0, 1, 1, 1, 1, 1, 0],
  104.          [1, 1, 0, 0, 0, 1, 1],
  105.          [1, 1, 0, 0, 0, 1, 1],
  106.          [1, 1, 0, 0, 0, 1, 1],
  107.          [1, 1, 0, 0, 0, 1, 1],
  108.          [0, 1, 1, 1, 1, 1, 0],
  109.      ],  //
  110.      [
  111.          [0, 1, 1, 1, 1, 1, 0],
  112.          [1, 1, 0, 0, 0, 1, 1],
  113.          [1, 1, 0, 0, 0, 1, 1],
  114.          [1, 1, 0, 0, 0, 1, 1],
  115.          [0, 1, 1, 1, 0, 1, 1],
  116.          [0, 0, 0, 0, 0, 1, 1],
  117.          [0, 0, 0, 0, 0, 1, 1],
  118.          [0, 0, 0, 0, 1, 1, 0],
  119.          [0, 0, 0, 1, 1, 0, 0],
  120.          [0, 1, 1, 0, 0, 0, 0],
  121.      ],  //
  122.      [
  123.          [0, 0, 0, 0],
  124.          [0, 0, 0, 0],
  125.          [0, 1, 1, 0],
  126.          [0, 1, 1, 0],
  127.          [0, 0, 0, 0],
  128.          [0, 0, 0, 0],
  129.          [0, 1, 1, 0],
  130.          [0, 1, 1, 0],
  131.          [0, 0, 0, 0],
  132.          [0, 0, 0, 0],
  133.      ]   // :
  134.  ]

小球的位置该怎么计算呢？再来看一张图片:

js的代码我就直接粘贴出来了，大部分都已经写上注释了。大家如果还是有地方弄不明白可以去慕课网看刘宇波老师的免费教学视频再学习一下。把地址直接给你们贴出来省去大家搜索的时间。炫丽的倒计时效果Canvas绘图与动画基础

  1.  <script>
  2.      var WINDOW_WIDTH = undefined;   //画布的宽度
  3.      var WINDOW_HEIGHT = undefined;  //画布的高度
  4.      var RADIUS = undefined;         //小球的半径
  5.      var MARGIN_LEFT = undefined;    //数字距离画布上方的距离
  6.      var MARGIN_TOP = undefined;     //最左边数字距离画布左边的距离
  7.  
  8.      // var endTime = new Date(2019, 5, 28, 08, 30, 30);     //设置倒计时终止的时间,此处注意月份是从0开始计算,即0代表1月
  9.  
  10.      var endTime = new Date();
  11.      endTime.setTime(endTime.getTime() + 3600 * 1000)  //设置一小时的倒计时
  12.      var curShowTimeSecoeds = undefined;     //现在倒计时有多少毫秒
  13.      var balls = [];                 //存储时间变化时产生的新的小球
  14.      var colors = ['#33B5E5', '#0099CC', '#AA66CC', '#9933CC', '#669900', '#FFBB33', '#FF8800', '#FF4444', '#CC0000'];
  15.  
  16.      window.onload = function () {
  17.          var canvas = document.getElementById('canvas');
  18.  
  19.          WINDOW_WIDTH = document.body.clientWidth;
  20.          WINDOW_HEIGHT = document.body.clientHeight;
  21.  
  22.          MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);
  23.          MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);
  24.          RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 119) - 1;
  25.  
  26.          canvas.width = WINDOW_WIDTH;
  27.          canvas.height = WINDOW_HEIGHT;
  28.  
  29.          if (canvas.getContext("2d")) {
  30.              var context = canvas.getContext('2d');
  31.  
  32.              curShowTimeSecoeds = getCurrentShowTimeSeconds();
  33.  
  34.              //定时器
  35.              setInterval(
  36.                  function () {
  37.                      render(context);
  38.                      update();
  39.                  },
  40.                  50
  41.              )
  42.          } else {
  43.              alert('您的浏览器不支持canvas,请更换浏览器尝试~')
  44.          }
  45.      }
  46.  
  47.      function render(cxt) {
  48.  
  49.          //清空一下画布内容
  50.          cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
  51.  
  52.          //计算需要倒计时的时分秒
  53.          var hours = parseInt(curShowTimeSecoeds / 3600);
  54.          var minutes = parseInt((curShowTimeSecoeds - hours * 3600) / 60);
  55.          var seconds = curShowTimeSecoeds % 60;
  56.  
  57.          //确定时分秒和冒号的数字及位置
  58.          renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt)
  59.          renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt)
  60.          renderDigit(MARGIN_LEFT + 32 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
  61.          renderDigit(MARGIN_LEFT + 43 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt)
  62.          renderDigit(MARGIN_LEFT + 59 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt)
  63.          renderDigit(MARGIN_LEFT + 76 * (RADIUS + 1), MARGIN_TOP, 10, cxt)
  64.          renderDigit(MARGIN_LEFT + 88 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt)
  65.          renderDigit(MARGIN_LEFT + 104 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt)
  66.  
  67.          //绘制时分秒和冒号的小球的
  68.          for (var i = 0; i < balls.length; i++) {
  69.              cxt.fillStyle = balls[i].color;
  70.  
  71.              cxt.beginPath();
  72.              cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI, true);
  73.              cxt.closePath();
  74.  
  75.              cxt.fill();
  76.          }
  77.      }
  78.  
  79.      //画时分秒上的小球
  80.      function renderDigit(x, y, num, cxt) {
  81.  
  82.          cxt.fillStyle = 'rgb(0,102,153)';
  83.  
  84.          for (var i = 0; i < digit[num].length; i++) {
  85.              for (var j = 0; j < digit[num][i].length; j++) {
  86.                  if (digit[num][i][j] === 1) {
  87.                      cxt.beginPath();
  88.                      cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
  89.                      cxt.closePath();
  90.  
  91.                      cxt.fill();
  92.                  }
  93.              }
  94.          }
  95.      }
  96.  
  97.      //计算倒计时的时间
  98.      function getCurrentShowTimeSeconds() {
  99.          var curTime = new Date();       //当前时间
  100.          var ret = endTime.getTime() - curTime.getTime();    //截止时间-当前时间
  101.          ret = Math.round(ret / 1000);       //需要倒计时的时间 秒
  102.  
  103.          return ret >= 0 ? ret : 0;
  104.  
  105.          // //时钟效果
  106.          // var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
  107.  
  108.          return ret;
  109.  
  110.      }
  111.  
  112.      //时间发生倒计时的函数
  113.      function update() {
  114.  
  115.          //下一次显示的时间
  116.          var nextShowTimeSeconds = getCurrentShowTimeSeconds();
  117.  
  118.          var nextHours = parseInt(nextShowTimeSeconds / 3600);
  119.          var nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
  120.          var nextSeconds = nextShowTimeSeconds % 60;
  121.  
  122.          //现在显示的时间
  123.          var curHours = parseInt(curShowTimeSecoeds / 3600);
  124.          var curMinutes = parseInt((curShowTimeSecoeds - curHours * 3600) / 60);
  125.          var curSeconds = curShowTimeSecoeds % 60;
  126.  
  127.          //如果时间发生改变就会在相应位置产生新的彩色小球
  128.          if (nextShowTimeSeconds !== curShowTimeSecoeds) {
  129.  
  130.              if (parseInt(curHours / 10) !== parseInt(nextHours / 10)) {
  131.                  addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(nextHours / 10));
  132.              }
  133.              if (parseInt(curHours % 10) !== parseInt(nextHours % 10)) {
  134.                  addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(nextHours % 10));
  135.              }
  136.  
  137.              if (parseInt(curMinutes / 10) !== parseInt(nextMinutes / 10)) {
  138.                  addBalls(MARGIN_LEFT + 43 * (RADIUS + 1), MARGIN_TOP, parseInt(nextMinutes / 10));
  139.              }
  140.              if (parseInt(curMinutes % 10) !== parseInt(nextMinutes % 10)) {
  141.                  addBalls(MARGIN_LEFT + 59 * (RADIUS + 1), MARGIN_TOP, parseInt(nextMinutes % 10));
  142.              }
  143.  
  144.              if (parseInt(curSeconds / 10) !== parseInt(nextSeconds / 10)) {
  145.                  addBalls(MARGIN_LEFT + 88 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSeconds / 10));
  146.              }
  147.              if (parseInt(curSeconds % 10) !== parseInt(nextSeconds % 10)) {
  148.                  addBalls(MARGIN_LEFT + 104 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSeconds % 10));
  149.              }
  150.  
  151.              curShowTimeSecoeds = nextShowTimeSeconds;
  152.  
  153.          }
  154.          //产生的彩色小球的运动
  155.          updateBalls();
  156.  
  157.      }
  158.  
  159.      //产生的彩色小球运动的函数
  160.      function updateBalls() {
  161.          for (var i = 0; i < balls.length; i++) {
  162.              balls[i].x += balls[i].vx;
  163.              balls[i].y += balls[i].vy;
  164.              balls[i].vy += balls[i].g;
  165.  
  166.              if (balls[i].y >= WINDOW_HEIGHT - RADIUS) {
  167.                  balls[i].y = WINDOW_HEIGHT - RADIUS;
  168.                  balls[i].vy = -balls[i].vy * 0.75;
  169.              }
  170.          }
  171.  
  172.          //优化  小球如果滚出画布就取消这些小球
  173.          var cnt = 0;
  174.          for (var i = 0; i < balls.length; i++) {
  175.              if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH) {
  176.                  balls[cnt++] = balls[i]
  177.              }
  178.          }
  179.  
  180.          //为了确保性能可以定义一下最多产生多少彩色小球
  181.          while (balls.length > Math.min(2000, cnt)) {
  182.              balls.pop();
  183.          }
  184.      }
  185.  
  186.      //时间发生变化的时候产生新的彩色小球的函数
  187.      function addBalls(x, y, num) {
  188.          for (var i = 0; i < digit[num].length; i++) {
  189.              for (var j = 0; j < digit[num][i].length; j++) {
  190.                  if (digit[num][i][j] === 1) {
  191.                      var aBall = {
  192.                          x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
  193.                          y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
  194.                          g: 1.5 + Math.random(),
  195.                          vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
  196.                          vy: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
  197.                          color: colors[Math.floor(Math.random() * colors.length)]
  198.                      }
  199.                      balls.push(aBall)
  200.                  }
  201.              }
  202.          }
  203.          // console.log(balls.length)
  204.      }
  205.  
  206.  </script>

canvas的进阶 - 学习利用canvas做一个炫酷的倒计时功能的更多相关文章

  1. 在树莓派上用 python 做一个炫酷的天气预报

    教大家如何在树莓派上自己动手做一个天气预报.此次教程需要大家有一定的python 基础,没有也没关系,文末我会放出我已写好的代码供大家下载. 首先在开始之前 需要申请高德地图API,去高德地图官网注册 ...

  2. 利用UIWebView打造一个炫酷的视频背景视图（OC & Swift）

    http://www.cocoachina.com/ios/20151023/13860.html 2015-10-6更新:适配 Swift2.0 如有需要,可以通过pjin.elvin@gmail. ...

  3. 如何利用GitHub设计一个炫酷的个人网站（含代码）

    1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...

  4. 教你用canvas打造一个炫酷的碎片切图效果

    前言 今天分享一个炫酷的碎片式切图效果,这个其实在自己的之前的博客上有实现过,本人觉得这个效果还是挺炫酷的,这次还是用我们的canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,需要点数 ...

  5. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  6. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  7. 一个炫酷的Actionbar效果

    今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...

  8. 2019基于Hexo快速搭建个人博客，打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  9. Android一个炫酷的树状图组织架构图开源控件实现过程

    Android一个炫酷的树状图组织架构图开源控件 文章目录 [1 简介] [2 效果展示] [3 使用步骤] [4 实现基本布局流程] [5 实现自由放缩及拖动] [6 实现添加删除及节点动画] [7 ...

随机推荐

  1. laravel routes除了默认路由，其他的都无效 解决方案

    按照教程.该php升级到5.5,所有是开放的扩展,默认路由进入,证明代码错误,平时不开rewrite铅 假设你其它路由,localhost/文件夹/public/index.php/home能够进去. ...

  2. windows下Eclipse启动tomcat提示port已被占用 already in use

    >netstat -ano | findstr 8009 TCP    127.0.0.1:8005         0.0.0.0:0              LISTENING       ...

  3. 【转】NIO与传统IO的区别

    转自:http://blog.csdn.net/zhouhl_cn/article/details/6568119 传统的socket IO中,需要为每个连接创建一个线程,当并发的连接数量非常巨大时, ...

  4. 在WPF中制作正圆形公章

    原文:在WPF中制作正圆形公章 之前,我利用C#与GDI+程序制作过正圆形公章(利用C#制作公章 ,C#制作公章[续])并将它集成到一个小软件中(个性印章及公章的画法及实现),今天我们来探讨一下WPF ...

  5. wpf窗体定位

    原文:wpf窗体定位 据WPF外包小编了解,通常,不需要在屏幕上明确定位窗口.而是简单地将WindowState属性设置为Normal,并忽略其他所有细节.另一方面,很少会将WindowStartup ...

  6. jquery hover()的使用

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. WPF值转换器的使用

    <Window x:Class="CollectionBinding.MainWindow"        xmlns="http://schemas.micros ...

  8. surfaceview组件的surfaceCreated()不被调用的解决方案

    原文:surfaceview组件的surfaceCreated()不被调用的解决方案 有时候我们有需要在native层做在surfaceview的上下文中做渲染,这个时候只是提供了一个单独什么都不做的 ...

  9. 从一段简单算法题来谈二叉查找树(BST)的基础算法

    先给出一道很简单,喜闻乐见的二叉树算法题: 给出一个二叉查找树和一个目标值,如果其中有两个元素的和等于目标值则返回真,否则返回假. 例如: Input: 5 / \ 3 6 / \ \ 2 4 7 T ...

  10. PHP 实现自动加载器(Autoloader)

    我们知道PHP可以实现自动加载,避免了繁重的体力活,代码更规范,整洁.那如果我们把这个自动加载再升华一下,变成自动加载类,每次只需要引入这个类,那么其他类就自动加载了,已经开源,仓库地址在这里.同时如 ...