用Canvas写一个炫酷的时间更新动画玩玩

貌似正文运行不了JS了...
打开浏览器Console，复制下面的js运行即可...
  1 $('#canvas-container')[0].innerHTML='<canvas id="canvas"></canvas>';
  2 var WINDOW_WIDTH = 913;
  3         var WINDOW_HEIGHT = 400;
  4         var RADIUS = 7; //球半径
  5         var NUMBER_GAP = 10; //数字之间的间隙
  6         var u=0.65; //碰撞能量损耗系数
  7         var context; //Canvas绘制上下文
  8 
  9         var balls = []; //存储彩色的小球
 10         const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; //彩色小球的颜色
 11 
 12         var currentNums = []; //屏幕显示的8个字符
 13 
 14         var digit =
 15                 [
 16                     [
 17                         [0,0,1,1,1,0,0],
 18                         [0,1,1,0,1,1,0],
 19                         [1,1,0,0,0,1,1],
 20                         [1,1,0,0,0,1,1],
 21                         [1,1,0,0,0,1,1],
 22                         [1,1,0,0,0,1,1],
 23                         [1,1,0,0,0,1,1],
 24                         [1,1,0,0,0,1,1],
 25                         [0,1,1,0,1,1,0],
 26                         [0,0,1,1,1,0,0]
 27                     ],//0
 28                     [
 29                         [0,0,0,1,1,0,0],
 30                         [0,1,1,1,1,0,0],
 31                         [0,0,0,1,1,0,0],
 32                         [0,0,0,1,1,0,0],
 33                         [0,0,0,1,1,0,0],
 34                         [0,0,0,1,1,0,0],
 35                         [0,0,0,1,1,0,0],
 36                         [0,0,0,1,1,0,0],
 37                         [0,0,0,1,1,0,0],
 38                         [1,1,1,1,1,1,1]
 39                     ],//1
 40                     [
 41                         [0,1,1,1,1,1,0],
 42                         [1,1,0,0,0,1,1],
 43                         [0,0,0,0,0,1,1],
 44                         [0,0,0,0,1,1,0],
 45                         [0,0,0,1,1,0,0],
 46                         [0,0,1,1,0,0,0],
 47                         [0,1,1,0,0,0,0],
 48                         [1,1,0,0,0,0,0],
 49                         [1,1,0,0,0,1,1],
 50                         [1,1,1,1,1,1,1]
 51                     ],//2
 52                     [
 53                         [1,1,1,1,1,1,1],
 54                         [0,0,0,0,0,1,1],
 55                         [0,0,0,0,1,1,0],
 56                         [0,0,0,1,1,0,0],
 57                         [0,0,1,1,1,0,0],
 58                         [0,0,0,0,1,1,0],
 59                         [0,0,0,0,0,1,1],
 60                         [0,0,0,0,0,1,1],
 61                         [1,1,0,0,0,1,1],
 62                         [0,1,1,1,1,1,0]
 63                     ],//3
 64                     [
 65                         [0,0,0,0,1,1,0],
 66                         [0,0,0,1,1,1,0],
 67                         [0,0,1,1,1,1,0],
 68                         [0,1,1,0,1,1,0],
 69                         [1,1,0,0,1,1,0],
 70                         [1,1,1,1,1,1,1],
 71                         [0,0,0,0,1,1,0],
 72                         [0,0,0,0,1,1,0],
 73                         [0,0,0,0,1,1,0],
 74                         [0,0,0,1,1,1,1]
 75                     ],//4
 76                     [
 77                         [1,1,1,1,1,1,1],
 78                         [1,1,0,0,0,0,0],
 79                         [1,1,0,0,0,0,0],
 80                         [1,1,1,1,1,1,0],
 81                         [0,0,0,0,0,1,1],
 82                         [0,0,0,0,0,1,1],
 83                         [0,0,0,0,0,1,1],
 84                         [0,0,0,0,0,1,1],
 85                         [1,1,0,0,0,1,1],
 86                         [0,1,1,1,1,1,0]
 87                     ],//5
 88                     [
 89                         [0,0,0,0,1,1,0],
 90                         [0,0,1,1,0,0,0],
 91                         [0,1,1,0,0,0,0],
 92                         [1,1,0,0,0,0,0],
 93                         [1,1,0,1,1,1,0],
 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                         [1,1,0,0,0,1,1],
 98                         [0,1,1,1,1,1,0]
 99                     ],//6
100                     [
101                         [1,1,1,1,1,1,1],
102                         [1,1,0,0,0,1,1],
103                         [0,0,0,0,1,1,0],
104                         [0,0,0,0,1,1,0],
105                         [0,0,0,1,1,0,0],
106                         [0,0,0,1,1,0,0],
107                         [0,0,1,1,0,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                     ],//7
112                     [
113                         [0,1,1,1,1,1,0],
114                         [1,1,0,0,0,1,1],
115                         [1,1,0,0,0,1,1],
116                         [1,1,0,0,0,1,1],
117                         [0,1,1,1,1,1,0],
118                         [1,1,0,0,0,1,1],
119                         [1,1,0,0,0,1,1],
120                         [1,1,0,0,0,1,1],
121                         [1,1,0,0,0,1,1],
122                         [0,1,1,1,1,1,0]
123                     ],//8
124                     [
125                         [0,1,1,1,1,1,0],
126                         [1,1,0,0,0,1,1],
127                         [1,1,0,0,0,1,1],
128                         [1,1,0,0,0,1,1],
129                         [0,1,1,1,0,1,1],
130                         [0,0,0,0,0,1,1],
131                         [0,0,0,0,0,1,1],
132                         [0,0,0,0,1,1,0],
133                         [0,0,0,1,1,0,0],
134                         [0,1,1,0,0,0,0]
135                     ],//9
136                     [
137                         [0,0,0,0],
138                         [0,0,0,0],
139                         [0,1,1,0],
140                         [0,1,1,0],
141                         [0,0,0,0],
142                         [0,0,0,0],
143                         [0,1,1,0],
144                         [0,1,1,0],
145                         [0,0,0,0],
146                         [0,0,0,0]
147                     ]//:
148                 ];
149 
150         function drawDatetime(cxt){
151             var nums = [];
152 
153             context.fillStyle="#005eac"
154             var date = new Date();
155             var offsetX = 70, offsetY = 30;
156             var hours = date.getHours();
157             var num1 = Math.floor(hours/10);
158             var num2 = hours%10;
159             nums.push({num: num1});
160             nums.push({num: num2});
161             nums.push({num: 10}); //冒号
162             var minutes = date.getMinutes();
163             var num1 = Math.floor(minutes/10);
164             var num2 = minutes%10;
165             nums.push({num: num1});
166             nums.push({num: num2});
167             nums.push({num: 10}); //冒号
168             var seconds = date.getSeconds();
169             var num1 = Math.floor(seconds/10);
170             var num2 = seconds%10;
171             nums.push({num: num1});
172             nums.push({num: num2});
173 
174             for(var x = 0;x<nums.length;x++){
175                 nums[x].offsetX = offsetX;
176                 offsetX = drawSingleNumber(offsetX,offsetY, nums[x].num,cxt);
177                 //两个数字连一块，应该间隔一些距离
178                 if(x<nums.length-1){
179                     if((nums[x].num!=10) &&(nums[x+1].num!=10)){
180                         offsetX+=NUMBER_GAP;
181                     }
182                 }
183             }
184 
185             //说明这是初始化
186             if(currentNums.length ==0){
187                 currentNums = nums;
188             }else{
189                 //进行比较
190                 for(var index = 0;index<currentNums.length;index++){
191                     if(currentNums[index].num!=nums[index].num){
192                         //不一样时，添加彩色小球
193                         addBalls(nums[index]);
194                         currentNums[index].num=nums[index].num;
195                     }
196                 }
197             }
198             renderBalls(cxt);
199             updateBalls();
200 
201             return date;
202         }
203 
204         function addBalls (item) {
205             var num = item.num;
206             var numMatrix = digit[num];
207             for(var y = 0;y<numMatrix.length;y++){
208                 for(var x = 0;x<numMatrix[y].length;x++){
209                     if(numMatrix[y][x]==1){
210                         var ball={
211                             offsetX:item.offsetX+RADIUS+RADIUS*2*x,
212                             offsetY:30+RADIUS+RADIUS*2*y,
213                             color:colors[Math.floor(Math.random()*colors.length)],
214                             g:1.5+Math.random(),
215                             vx:Math.pow(-1, Math.ceil(Math.random()*10))*4+Math.random(),
216                             vy:-5
217                         }
218                         balls.push(ball);
219                     }
220                 }
221             }
222         }
223 
224         function renderBalls(cxt){
225             for(var index = 0;index<balls.length;index++){
226                 cxt.beginPath();
227                 cxt.fillStyle=balls[index].color;
228                 cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2*Math.PI);
229                 cxt.fill();
230             }
231         }
232 
233         function updateBalls () {
234             var i =0;
235             for(var index = 0;index<balls.length;index++){
236                 var ball = balls[index];
237                 ball.offsetX += ball.vx;
238                 ball.offsetY += ball.vy;
239                 ball.vy+=ball.g;
240                 if(ball.offsetY > (WINDOW_HEIGHT-RADIUS)){
241                     ball.offsetY= WINDOW_HEIGHT-RADIUS;
242                     ball.vy=-ball.vy*u;
243                 }
244                 if(ball.offsetX>RADIUS&&ball.offsetX<(WINDOW_WIDTH-RADIUS)){
245                     balls[i]=balls[index];
246                     i++;
247                 }
248             }
249             //去除出边界的球
250             for(;i<balls.length;i++){
251                 balls.pop();
252             }
253         }
254 
255         function drawSingleNumber(offsetX, offsetY, num, cxt){
256             var numMatrix = digit[num];
257             for(var y = 0;y<numMatrix.length;y++){
258                 for(var x = 0;x<numMatrix[y].length;x++){
259                     if(numMatrix[y][x]==1){
260                         cxt.beginPath();
261                         cxt.arc(offsetX+RADIUS+RADIUS*2*x,offsetY+RADIUS+RADIUS*2*y,RADIUS,0,2*Math.PI);
262                         cxt.fill();
263                     }
264                 }
265             }
266             cxt.beginPath();
267             offsetX += numMatrix[0].length*RADIUS*2;
268             return offsetX;
269         }
270 
271         var canvas = document.getElementById("canvas");
272         canvas.width=WINDOW_WIDTH;
273         canvas.height=WINDOW_HEIGHT;
274         context = canvas.getContext("2d");
275 
276         //记录当前绘制的时刻
277         var currentDate = new Date();
278 
279         setInterval(function(){
280             //清空整个Canvas，重新绘制内容
281             context.clearRect(0, 0, context.canvas.width, context.canvas.height);
282             drawDatetime(context);
283         }, 50)
posted @ 2014-08-02 02:27 Create Chen 阅读(2329) 评论(1) 编辑收藏举报
刷新页面返回顶部
用Canvas写一个炫酷的时间更新动画玩玩

公告
