效果图：
这个实例主要注意:
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 ????],//0 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 ????],//1 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 ????],//2 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 ????],//3 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 ????],//4 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 ????],//5 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 ????],//6 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 ????],//7 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 ????],//8111 ????[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 ????],//9123 ????[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>???????
这里要注意一下，如果当前时间超过2017年10月10日15:30:02分就没有效果了，你需要把这个剩余时间设置比你当前的时间大几天就可以了
[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果
原文地址：http://www.cnblogs.com/ghostwu/p/7637892.html