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

作者:分分快三计划

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

                //画:
                //小时与分钟之间
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m 140, n 80, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();

num.js文件:

                var now = new Date;
                var hour = now.getHours();
                var min = now.getMinutes();
                var sec = now.getSeconds();
                var msec = now.getMilliseconds();
                hour = hour >= 10 ? hour : "0" hour;
                min = min >= 10 ? min : "0" min;
                sec = sec >= 10 ? sec : "0" sec;
                msec = (msec >= 10 && msec < 100) ? ("0" msec) : (msec >= 0 && msec < 10) ? ("00" msec) : msec;

run code

                //a
                function a() {
                    cxt.beginPath();
                    cxt.moveTo(x, y);
                    cxt.lineTo(x 50, y);
                    cxt.closePath();
                    cxt.stroke();
                }

1,剩余时间的计算

复制代码 代码如下:

这个实例主要注意:

                //f
                function f() {
                    cxt.beginPath();
                    cxt.moveTo(x - 5, y 55);
                    cxt.lineTo(x - 5, y 5);
                    cxt.closePath();
                    cxt.stroke();
                }

View Code

                //三位数的显示
                function tdigital(x, y, num) {
                    var ge = num % 10;
                    var shi = (parseInt(num / 10)) % 10;
                    var bai = parseInt((parseInt(num / 10)) / 10) % 10;
                    digital(x, y, bai);
                    digital(x 70, y, shi);
                    digital(x 140, y, ge);
                }

倒计时实现:

                bdigital(m, n, hour);
                bdigital(m 160, n, min);
                bdigital(m 320, n, sec);
                //tdigital(m 480, n, msec);

 

<!doctype html>
<html>
    <head>
        <title>canvas dClock</title>
    </head>
    <body>
        <canvas id = "clock" width = "500px" height = "200px">
            您的浏览器太古董了,升级吧!
        </canvas>
        <script type = "text/javascript">
            var clock = document.getElementById("clock");
            var cxt = clock.getContext("2d");

2,每个时间数字的绘制

                //分钟与秒之间
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m 300, n 80, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();

效果图:

分分快三计划 1

 

                //b
                function b() {
                    cxt.beginPath();
                    cxt.moveTo(x 55, y 5);
                    cxt.lineTo(x 55, y 55);
                    cxt.closePath();
                    cxt.stroke();
                }

分分快三计划 2

                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m 140, n 100, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();

 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>

            showTime(1, 45);
            setInterval("showTime(1,45)", 1000);
        </script>
    </body>
</html>

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

                //秒与毫秒之间一个.
//                cxt.lineWidth = 5;
//                cxt.strokeStyle = "#000";
//                cxt.fillStyle = "#000";
//                cxt.beginPath();
//                cxt.arc(m 460, n 100, 3, 0, 360, false);
//                cxt.fill();
//                cxt.closePath();
//                cxt.stroke();
            }

 

                //数字n
                function number(n) {
                    switch (n) {
                        case 0: zero(); break;
                        case 1: one(); break;
                        case 2: two(); break;
                        case 3: three(); break;
                        case 4: four(); break;
                        case 5: five(); break;
                        case 6: six(); break;
                        case 7: seven(); break;
                        case 8: eight(); break;
                        case 9: nine(); break;
                    }
                }
                number(num);
            }

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

                //两位数的显示
                function bdigital(x, y, num) {
                    var ge = num % 10;
                    var shi = (parseInt(num / 10)) % 10;
                    digital(x, y, shi);
                    digital(x 70, y, ge);
                }

分分快三计划 3分分快三计划 4

                //0
                function zero() {
                    a(); b(); c(); d(); e(); f();
                }
                //1
                function one() {
                    b(); c();
                }
                //2
                function two() {
                    a(); b(); d(); e(); g();
                }
                //3
                function three() {
                    a(); b(); c(); d(); g();
                }
                //4
                function four() {
                    b(); c(); f(); g();
                }
                //5
                function five() {
                    a(); c(); d(); f(); g();
                }
                //6
                function six() {
                    a(); c(); d(); e(); f(); g();
                }
                //7
                function seven() {
                    a(); b(); c();
                }
                //8
                function eight() {
                    a(); b(); c(); d(); e(); f(); g();
                }
                //9
                function nine() {
                    a(); b(); c(); d(); f(); g();
                }

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

                //d
                function d() {
                    cxt.beginPath();
                    cxt.moveTo(x 50, y 115);
                    cxt.lineTo(x, y 115);
                    cxt.closePath();
                    cxt.stroke();
                }

 

            //显示一位数字
            function digital(x, y, num) {
                //设置风格
                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";

                cxt.lineWidth = 5;
                cxt.strokeStyle = "#000";
                cxt.fillStyle = "#000";
                cxt.beginPath();
                cxt.arc(m 300, n 100, 3, 0, 360, false);
                cxt.fill();
                cxt.closePath();
                cxt.stroke();

            //显示数字时钟
            function showTime(m, n) {
                cxt.clearRect(0, 0, 500, 500);

代码如下: !doctype html html head titlecanvas dClock/title /head body canvas id = "clock" width = "500px" height = "200px" 您的浏览器太古董了,升级吧!...

                //c
                function c() {
                    cxt.beginPath();
                    cxt.moveTo(x 55, y 60);
                    cxt.lineTo(x 55, y 110);
                    cxt.closePath();
                    cxt.stroke();
                }

                //g
                function g() {
                    cxt.beginPath();
                    cxt.moveTo(x, y 57.5);
                    cxt.lineTo(x 50, y 57.5);
                    cxt.closePath();
                    cxt.stroke();
                }

                //e
                function e() {
                    cxt.beginPath();
                    cxt.moveTo(x - 5, y 110);
                    cxt.lineTo(x - 5, y 60);
                    cxt.closePath();
                    cxt.stroke();
                }

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划