您的位置: 首页  >  IT文章  >  [js高手之路] html5 canvas教程

[js高手之路] html5 canvas教程

分类: IT文章 • 2023-11-22 15:39:25

效果图：

[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 ];
View Code

倒计时实现：

 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 ></canvas>
67 </body>

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

相关推荐