效果图:

[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

相关文章:

猜你喜欢
相关资源
相似解决方案