炫丽的倒计时效果Canvas绘图与动画基础

Posted Jacklovely

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了炫丽的倒计时效果Canvas绘图与动画基础相关的知识,希望对你有一定的参考价值。

digit.js

  1 digit = [
  2         [
  3         //0
  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         ],
 15 
 16         [
 17         //1
 18         [0, 0, 0, 1, 1, 0, 0],
 19         [0, 1, 1, 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         [0, 0, 0, 1, 1, 0, 0],
 26         [0, 0, 0, 1, 1, 0, 0],
 27         [1, 1, 1, 1, 1, 1, 1]
 28         ],
 29 
 30         [
 31         //2
 32         [0, 1, 1, 1, 1, 1, 0],
 33         [1, 1, 0, 0, 0, 1, 1],
 34         [0, 0, 0, 0, 0, 1, 1],
 35         [0, 0, 0, 0, 1, 1, 0],
 36         [0, 0, 0, 1, 1, 0, 0],
 37         [0, 0, 1, 1, 0, 0, 0],
 38         [0, 1, 1, 0, 0, 0, 0],
 39         [1, 1, 0, 0, 0, 0, 0],
 40         [1, 1, 0, 0, 0, 0, 0],
 41         [1, 1, 1, 1, 1, 1, 1]
 42         ],
 43 
 44         [
 45         //3
 46         [1, 1, 1, 1, 1, 1, 1],
 47         [0, 0, 0, 0, 0, 1, 1],
 48         [0, 0, 0, 0, 1, 1, 0],
 49         [0, 0, 0, 1, 1, 0, 0],
 50         [0, 0, 1, 1, 1, 0, 0],
 51         [0, 0, 0, 0, 1, 1, 0],
 52         [0, 0, 0, 0, 0, 1, 1],
 53         [0, 0, 0, 0, 0, 1, 1],
 54         [1, 1, 0, 0, 0, 1, 1],
 55         [0, 1, 1, 1, 1, 1, 0]
 56         ],
 57 
 58         [
 59         //4
 60         [0, 0, 0, 0, 1, 1, 0],
 61         [0, 0, 0, 1, 1, 1, 0],
 62         [0, 0, 1, 1, 1, 1, 0],
 63         [0, 1, 1, 0, 1, 1, 0],
 64         [1, 1, 0, 0, 1, 1, 0],
 65         [1, 1, 1, 1, 1, 1, 1],
 66         [0, 0, 0, 0, 1, 1, 0],
 67         [0, 0, 0, 0, 1, 1, 0],
 68         [0, 0, 0, 0, 1, 1, 0],
 69         [0, 0, 0, 1, 1, 1, 1]
 70         ],
 71 
 72         [
 73         //5
 74         [1, 1, 1, 1, 1, 1, 1],
 75         [1, 1, 0, 0, 0, 0, 0],
 76         [1, 1, 0, 0, 0, 0, 0],
 77         [1, 1, 1, 1, 1, 1, 0],
 78         [0, 0, 0, 0, 0, 1, 1],
 79         [0, 0, 0, 0, 0, 1, 1],
 80         [0, 0, 0, 0, 0, 1, 1],
 81         [0, 0, 0, 0, 0, 1, 1],
 82         [1, 1, 0, 0, 0, 1, 1],
 83         [0, 1, 1, 1, 1, 1, 0]
 84         ],
 85 
 86         [
 87         //6
 88         [0, 0, 0, 0, 1, 1, 0],
 89         [0, 0, 1, 1, 0, 0, 0],
 90         [0, 1, 1, 0, 0, 0, 0],
 91         [1, 1, 0, 0, 0, 0, 0],
 92         [1, 1, 0, 1, 1, 1, 0],
 93         [1, 1, 0, 0, 0, 1, 1],
 94         [1, 1, 0, 0, 0, 1, 1],
 95         [1, 1, 0, 0, 0, 1, 1],
 96         [1, 1, 0, 0, 0, 1, 1],
 97         [0, 1, 1, 1, 1, 1, 0]
 98         ],
 99 
100         [
101         //7
102         [1, 1, 1, 1, 1, 1, 1],
103         [1, 1, 0, 0, 0, 1, 1],
104         [0, 0, 0, 0, 1, 1, 0],
105         [0, 0, 0, 0, 1, 1, 0],
106         [0, 0, 0, 1, 1, 0, 0],
107         [0, 0, 0, 1, 1, 0, 0],
108         [0, 0, 1, 1, 0, 0, 0],
109         [0, 0, 1, 1, 0, 0, 0],
110         [0, 0, 1, 1, 0, 0, 0],
111         [0, 0, 1, 1, 0, 0, 0]
112         ],
113 
114         [
115         //8
116         [0, 1, 1, 1, 1, 1, 0],
117         [1, 1, 0, 0, 0, 1, 1],
118         [1, 1, 0, 0, 0, 1, 1],
119         [1, 1, 0, 0, 0, 1, 1],
120         [0, 1, 1, 1, 1, 1, 0],
121        [1, 1, 0, 0, 0, 1, 1],
122         [1, 1, 0, 0, 0, 1, 1],
123         [1, 1, 0, 0, 0, 1, 1],
124         [1, 1, 0, 0, 0, 1, 1],
125         [0, 1, 1, 1, 1, 1, 0]
126         ],
127 
128         [
129         //9
130         [0, 1, 1, 1, 1, 1, 0],
131         [1, 1, 0, 0, 0, 1, 1],
132         [1, 1, 0, 0, 0, 1, 1],
133         [1, 1, 0, 0, 0, 1, 1],
134         [0, 1, 1, 1, 0, 1, 1],
135         [0, 0, 0, 0, 0, 1, 1],
136         [0, 0, 0, 0, 0, 1, 1],
137         [0, 0, 0, 0, 1, 1, 0],
138         [0, 0, 0, 1, 1, 0, 0],
139         [0, 1, 1, 0, 0, 0, 0]
140         ],
141 
142         [
143         //:
144         [0, 0, 0, 0],
145         [0, 0, 0, 0],
146         [0, 1, 1, 0],
147         [0, 1, 1, 0],
148         [0, 0, 0, 0],
149         [0, 0, 0, 0],
150         [0, 1, 1, 0],
151         [0, 1, 1, 0],
152         [0, 0, 0, 0],
153         [0, 0, 0, 0]
154         ]
155 
156 ]

 

以上是关于炫丽的倒计时效果Canvas绘图与动画基础的主要内容,如果未能解决你的问题,请参考以下文章

canvas制作倒计时炫丽效果

更新——Canvas画布动画效果之实现倒计时

canvas绘图详解-03-绚丽的倒计时效果

canvas基础绘制-绚丽时钟

Tips——canvas闪屏问题的处理

Canvas绘图与动画详解