[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

效果图：

[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果-LMLPHP

这个实例主要注意:

1，剩余时间的计算

2，每个时间数字的绘制

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

num.js文件：

 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,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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ]//:

 ];

倒计时实现：

 <head>

     <meta charset='utf-8' />

     <style>

         #canvas {

             border: 1px dashed #aaa;

         }

     </style>

     <script src="./num.js"></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>

<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分就没有效果了，你需要把这个剩余时间设置比你当前的时间大几天就可以了

OGC

[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果