效果图:这个实例主要注意:1,剩余时间的计算2,每个时间数字的绘制时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 )num.js文件: 1 var digital = 2 [ 3 [ 4 [0,0,1,1,1,0,0], 5 [ ...
效果图:
这个实例主要注意:
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 ];
View Code
倒计时实现:
1 <head> 2 <meta charset='utf-8' /> 3 <style> 4 #canvas { 5 border: 1px dashed #aaa; 6 } 7 </style> 8 <script src='/images/loading.gif' data-original="./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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。