[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果
Posted ghostwu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果相关的知识，希望对你有一定的参考价值。
效果图：
这个实例主要注意:
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 ],//8 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 ],//9 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>
这里要注意一下，如果当前时间超过2017年10月10日15:30:02分就没有效果了，你需要把这个剩余时间设置比你当前的时间大几天就可以了
以上是关于[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果的主要内容，如果未能解决你的问题，请参考以下文章
[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
[js高手之路]html5 canvas动画教程 - 下雪效果
[js高手之路] html5 canvas动画教程 - 匀速运动