效果图：

这个实例主要注意:

1，剩余时间的计算

2，每个时间数字的绘制

时间主要有0-9和一个冒号组成，用数组来表示( 0: 就是不画圆，1：就是画一个蓝色的圆 )

num.js文件：

  1.  var digital =
  2.  [
  3.      [
  4.          [0,0,1,1,1,0,0],
  5.          [0,1,1,0,1,1,0],
  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.          [1,1,0,0,0,1,1],
  12.          [0,1,1,0,1,1,0],
  13.          [0,0,1,1,1,0,0]
  14.      ],//
  15.      [
  16.          [0,0,0,1,1,0,0],
  17.          [0,1,1,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.          [0,0,0,1,1,0,0],
  25.          [1,1,1,1,1,1,1]
  26.      ],//
  27.      [
  28.          [0,1,1,1,1,1,0],
  29.          [1,1,0,0,0,1,1],
  30.          [0,0,0,0,0,1,1],
  31.          [0,0,0,0,1,1,0],
  32.          [0,0,0,1,1,0,0],
  33.          [0,0,1,1,0,0,0],
  34.          [0,1,1,0,0,0,0],
  35.          [1,1,0,0,0,0,0],
  36.          [1,1,0,0,0,1,1],
  37.          [1,1,1,1,1,1,1]
  38.      ],//
  39.      [
  40.          [1,1,1,1,1,1,1],
  41.          [0,0,0,0,0,1,1],
  42.          [0,0,0,0,1,1,0],
  43.          [0,0,0,1,1,0,0],
  44.          [0,0,1,1,1,0,0],
  45.          [0,0,0,0,1,1,0],
  46.          [0,0,0,0,0,1,1],
  47.          [0,0,0,0,0,1,1],
  48.          [1,1,0,0,0,1,1],
  49.          [0,1,1,1,1,1,0]
  50.      ],//
  51.      [
  52.          [0,0,0,0,1,1,0],
  53.          [0,0,0,1,1,1,0],
  54.          [0,0,1,1,1,1,0],
  55.          [0,1,1,0,1,1,0],
  56.          [1,1,0,0,1,1,0],
  57.          [1,1,1,1,1,1,1],
  58.          [0,0,0,0,1,1,0],
  59.          [0,0,0,0,1,1,0],
  60.          [0,0,0,0,1,1,0],
  61.          [0,0,0,1,1,1,1]
  62.      ],//
  63.      [
  64.          [1,1,1,1,1,1,1],
  65.          [1,1,0,0,0,0,0],
  66.          [1,1,0,0,0,0,0],
  67.          [1,1,1,1,1,1,0],
  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.          [0,0,0,0,0,1,1],
  72.          [1,1,0,0,0,1,1],
  73.          [0,1,1,1,1,1,0]
  74.      ],//
  75.      [
  76.          [0,0,0,0,1,1,0],
  77.          [0,0,1,1,0,0,0],
  78.          [0,1,1,0,0,0,0],
  79.          [1,1,0,0,0,0,0],
  80.          [1,1,0,1,1,1,0],
  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.          [1,1,0,0,0,1,1],
  85.          [0,1,1,1,1,1,0]
  86.      ],//
  87.      [
  88.          [1,1,1,1,1,1,1],
  89.          [1,1,0,0,0,1,1],
  90.          [0,0,0,0,1,1,0],
  91.          [0,0,0,0,1,1,0],
  92.          [0,0,0,1,1,0,0],
  93.          [0,0,0,1,1,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.          [0,0,1,1,0,0,0]
  98.      ],//
  99.      [
  100.          [0,1,1,1,1,1,0],
  101.          [1,1,0,0,0,1,1],
  102.          [1,1,0,0,0,1,1],
  103.          [1,1,0,0,0,1,1],
  104.          [0,1,1,1,1,1,0],
  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.          [1,1,0,0,0,1,1],
  109.          [0,1,1,1,1,1,0]
  110.      ],//
  111.      [
  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.          [0,1,1,1,0,1,1],
  117.          [0,0,0,0,0,1,1],
  118.          [0,0,0,0,0,1,1],
  119.          [0,0,0,0,1,1,0],
  120.          [0,0,0,1,1,0,0],
  121.          [0,1,1,0,0,0,0]
  122.      ],//
  123.      [
  124.          [0,0,0,0],
  125.          [0,0,0,0],
  126.          [0,1,1,0],
  127.          [0,1,1,0],
  128.          [0,0,0,0],
  129.          [0,0,0,0],
  130.          [0,1,1,0],
  131.          [0,1,1,0],
  132.          [0,0,0,0],
  133.          [0,0,0,0]
  134.      ]//:
  135.  ];

倒计时实现：

  1.  <head>
  2.      <meta charset='utf-8' />
  3.      <style>
  4.          #canvas {
  5.              border: 1px dashed #aaa;
  6.          }
  7.      </style>
  8.      <script src="./num.js"></script>
  9.      <script>
  10.          window.onload = function () {
  11.              var oCanvas = document.querySelector("#canvas"),
  12.                  oGc = oCanvas.getContext('2d'),
  13.                  width = oCanvas.width, height = oCanvas.height,
  14.                  radius = 10,
  15.                  leftTime = 0,
  16.                  endTime = new Date( 2017, 09, 10, 15, 30, 02 );
  17.  
  18.              leftTime = getLeftTime();
  19.              showTime( oGc );
  20.              setInterval(function(){
  21.                  oGc.clearRect( 0, 0, width, height );
  22.                  leftTime = getLeftTime();
  23.                  showTime( oGc );
  24.              }, 1000);
  25.  
  26.              function showTime( cxt ){
  27.                  var hour = parseInt( leftTime / 3600 );
  28.                  var min = parseInt( ( leftTime - hour * 3600 ) / 60 );
  29.                  var sec = leftTime % 60;
  30.  
  31.                  showNum( 0, 0, parseInt( hour / 10 ), cxt );
  32.                  showNum( 15 * ( radius + 1 ), 0, parseInt( hour % 10 ), cxt );
  33.                  showNum( 30 * ( radius + 1 ), 0, 10, cxt );
  34.                  showNum( 39 * ( radius + 1 ), 0, parseInt( min / 10 ), cxt );
  35.                  showNum( 54 * ( radius + 1 ), 0, parseInt( min % 10 ), cxt );
  36.                  showNum( 69 * ( radius + 1 ), 0, 10, cxt );
  37.                  showNum( 78 * ( radius + 1 ), 0, parseInt( sec / 10 ), cxt );
  38.                  showNum( 93 * ( radius + 1 ), 0, parseInt( sec % 10 ), cxt );
  39.              }
  40.  
  41.              function getLeftTime(){
  42.                  var curTime = new Date();
  43.                  var restTime = endTime.getTime() - curTime.getTime();
  44.                  restTime = Math.round( restTime / 1000 );
  45.                  return restTime > 0 ? restTime : 0;
  46.              }
  47.  
  48.              //显示时间的每一位
  49.              function showNum( x, y, num, cxt ){
  50.                  cxt.fillStyle = '#09f';
  51.                  for( var i = 0; i < digital[num].length; i++ ){
  52.                      for( var j = 0; j < digital[num][i].length; j++ ){
  53.                          if ( digital[num][i][j] == 1 ){
  54.                              cxt.beginPath();
  55.                              cxt.arc( x + j * 2 * ( radius + 1 ) + ( radius + 1 ), y + i * 2 * ( radius + 1 ) + ( radius + 1 ), radius, 0, + 360 * Math.PI / 180, false );
  56.                              cxt.closePath();
  57.                              cxt.fill();
  58.                          }
  59.                      }
  60.                  }
  61.              }
  62.          }
  63.      </script>
  64.  </head>
  65.  <body>
  66.      <canvas id="canvas" width="1200" height="300"></canvas>
  67.  </body>

<head>
<meta charset='utf-8' />
<style>
#canvas {
border: 1px dashed #aaa;
}
</style>
<script>
var digital =
[
[
[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
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];
</script>
<script>
window.onload = function () {
var oCanvas = document.querySelector("#canvas"),
oGc = oCanvas.getContext('2d'),
width = oCanvas.width, height = oCanvas.height,
radius = 10,
leftTime = 0,
endTime = new Date( 2017, 09, 10, 15, 30, 02 );

leftTime = getLeftTime();
showTime( oGc );
setInterval(function(){
oGc.clearRect( 0, 0, width, height );
leftTime = getLeftTime();
showTime( oGc );
}, 1000);

function showTime( cxt ){
var hour = parseInt( leftTime / 3600 );
var min = parseInt( ( leftTime - hour * 3600 ) / 60 );
var sec = leftTime % 60;

showNum( 0, 0, parseInt( hour / 10 ), cxt );
showNum( 15 * ( radius + 1 ), 0, parseInt( hour % 10 ), cxt );
showNum( 30 * ( radius + 1 ), 0, 10, cxt );
showNum( 39 * ( radius + 1 ), 0, parseInt( min / 10 ), cxt );
showNum( 54 * ( radius + 1 ), 0, parseInt( min % 10 ), cxt );
showNum( 69 * ( radius + 1 ), 0, 10, cxt );
showNum( 78 * ( radius + 1 ), 0, parseInt( sec / 10 ), cxt );
showNum( 93 * ( radius + 1 ), 0, parseInt( sec % 10 ), cxt );
}

function getLeftTime(){
var curTime = new Date();
var restTime = endTime.getTime() - curTime.getTime();
restTime = Math.round( restTime / 1000 );
return restTime > 0 ? restTime : 0;
}

//显示时间的每一位
function showNum( x, y, num, cxt ){
cxt.fillStyle = '#09f';
for( var i = 0; i < digital[num].length; i++ ){
for( var j = 0; j < digital[num][i].length; j++ ){
if ( digital[num][i][j] == 1 ){
cxt.beginPath();
cxt.arc( x + j * 2 * ( radius + 1 ) + ( radius + 1 ), y + i * 2 * ( radius + 1 ) + ( radius + 1 ), radius, 0, + 360 * Math.PI / 180, false );
cxt.closePath();
cxt.fill();
}
}
}
}
}
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="300"></canvas>
</body>
run code

这里要注意一下，如果当前时间超过2017年10月10日15:30:02分就没有效果了，你需要把这个剩余时间设置比你当前的时间大几天就可以了
 
 

[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果的更多相关文章

  1. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...

  2. [js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格

    在canvas中,要画出1px的线条,默认情况下是不行的 context.beginPath(); context.moveTo( 100, 100 ); context.lineTo( 400, 1 ...

  3. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  4. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  5. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  6. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  7. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  8. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  9. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

随机推荐

  1. Jsoup（一）Jsoup详解（官方）

    一.Jsoup概述 1.1.简介     jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API, 可通过DOM,CSS以及类似于jQu ...

  2. Effective Java 第三版——2. 当构造方法参数过多时使用builder模式

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  3. 自学OpenCV时遇到的一些错误（捂脸ing，当年确实好多不懂...）

    6.8/14 opencv环境配置好了, 属性也设置对了, 但是使用VideoCapture类的时候, 还是出错.  右键可以查看其定义, 但是就是 出错.   漏掉了#include "s ...

  4. Docker 运行Tensorboard 和 jupyter的正确方法

    Docker 运行Tensorboard 和 jupyter的正确方法 网上找了很多方法都是jupyter 运行正常但不知道如何打开Tensorboard.折腾了很久,实验很多中方法最终找到了一个正确 ...

  5. Linux高性能server编程——信号及应用

     信号 信号是由用户.系统或者进程发送给目标进程的信息.以通知目标进程某个状态的改变或系统异常. Linux信号可由例如以下条件产生: 对于前台进程.用户能够通过输入特殊的终端字符来给它发送信号. ...

  6. HVR又一次load的时候须要将schedule suspend掉

    今天在进行HVR的又一次load的时候.报错了: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fi ...

  7. poj 2299 Ultra-QuickSort（树状数组求逆序数+离散化）

    题目链接:http://poj.org/problem?id=2299 Description In this problem, you have to analyze a particular so ...

  8. tools: idea 2017 激活

    1.下载并安装ideaIU (https://www.jetbrains.com/idea/download/#section=windows ,下载Ultimate版)2.下载 JetbrainsC ...

  9. 【转载】解决refreshing gradle project 和Building gradle project info 一直卡住\速度慢

    转载: http://blog.csdn.net/xx326664162/article/details/52002616 文章出自:薛瑄的博客 分析原因: 更改Gradle的版本后,或者更新AS后, ...

  10. 关于Idea中右边的maven projects窗口找不到了如何调出来

    关于Idea中右边的maven  projects窗口找不到了如何调出来? 具体的idea版本我不太清楚,我用的是2016版,其他版本应该也是一样的. 首先idea自带了maven控件,不像Eclip ...