CanvasBitClock

功能描述

canvas彩色碎粒掉落时钟。

依赖模块

./libs/base.js

快速使用

  1. ## demo
  3.     <div style="text-align: center; margin-top: 20%;">
  4.       <canvas id="canvas" style="width:200px;"></canvas>
  5.     </div>
  7.     <script>
  9.         var canvas = document.getElementById('canvas');
  11.         if (canvas.getContext) {
  12.             var cxt = canvas.getContext('2d');
  13.             //声明canvas的宽高
  14.             var H = 100,
  15.                 W = 700;
  16.             canvas.height = H;
  17.             canvas.width = W;
  18.             cxt.fillStyle = '#f00';
  19.             cxt.fillRect(10, 10, 50, 50);
  21.             //存储时间数据
  22.             var data = [];
  23.             //存储运动的小球
  24.             var balls = [];
  25.             //设置粒子半径
  26.             var R = canvas.height / 20 - 1;
  27.             (function() {
  28.                 var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
  29.                 //存储时间数字，由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成
  30.                 data.push(temp[1], temp[2], 10, temp[3], temp[4], 10, temp[5], temp[6]);
  31.             })();
  33.             /*生成点阵数字*/
  34.             function renderDigit(index, num) {
  35.                 for (var i = 0; i < digit[num].length; i++) {
  36.                     for (var j = 0; j < digit[num][i].length; j++) {
  37.                         if (digit[num][i][j] == 1) {
  38.                             cxt.beginPath();
  39.                             cxt.arc(14 * (R + 2) * index + j * 2 * (R + 1) + (R + 1), i * 2 * (R + 1) + (R + 1), R, 0, 2 * Math.PI);
  40.                             cxt.closePath();
  41.                             cxt.fill();
  42.                         }
  43.                     }
  44.                 }
  45.             }
  47.             /*更新时钟*/
  48.             function updateDigitTime() {
  49.                 var changeNumArray = [];
  50.                 var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());
  51.                 var NewData = [];
  52.                 NewData.push(temp[1], temp[2], 10, temp[3], temp[4], 10, temp[5], temp[6]);
  53.                 for (var i = data.length - 1; i >= 0; i--) {
  54.                     //时间发生变化 
  55.                     if (NewData[i] !== data[i]) {
  56.                         //将变化的数字值和在data数组中的索引存储在changeNumArray数组中
  57.                         changeNumArray.push(i + '_' + (Number(data[i]) + 1) % 10);
  58.                     }
  59.                 }
  60.                 //增加小球
  61.                 for (var i = 0; i < changeNumArray.length; i++) {
  62.                     addBalls.apply(this, changeNumArray[i].split('_'));
  63.                 }
  64.                 data = NewData.concat();
  65.             }
  67.             /*更新小球状态*/
  68.             function updateBalls() {
  69.                 for (var i = 0; i < balls.length; i++) {
  70.                     balls[i].stepY += balls[i].disY;
  71.                     balls[i].x += balls[i].stepX;
  72.                     balls[i].y += balls[i].stepY;
  73.                     if (balls[i].x > W + R || balls[i].y > H + R) {
  74.                         balls.splice(i, 1);
  75.                         i--;
  76.                     }
  77.                 }
  78.             }
  80.             /*增加要运动的小球*/
  81.             function addBalls(index, num) {
  82.                 var numArray = [1, 2, 3];
  83.                 var colorArray = ["#3BE", "#09C", "#A6C", "#93C", "#9C0", "#690", "#FB3", "#F80", "#F44", "#C00"];
  84.                 for (var i = 0; i < digit[num].length; i++) {
  85.                     for (var j = 0; j < digit[num][i].length; j++) {
  86.                         if (digit[num][i][j] == 1) {
  87.                             var ball = {
  88.                                 x: 14 * (R + 2) * index + j * 2 * (R + 1) + (R + 1),
  89.                                 y: i * 2 * (R + 1) + (R + 1),
  90.                                 stepX: Math.floor(Math.random() * 4 - 2),
  91.                                 stepY: -2 * numArray[Math.floor(Math.random() * numArray.length)],
  92.                                 color: colorArray[Math.floor(Math.random() * colorArray.length)],
  93.                                 disY: 1
  94.                             };
  95.                             balls.push(ball);
  96.                         }
  97.                     }
  98.                 }
  99.             }
  101.             /*渲染*/
  102.             function render() {
  103.                 //重置画布宽度，达到清空画布的效果
  104.                 canvas.height = 100;
  105.                 //渲染时钟
  106.                 for (var i = 0; i < data.length; i++) {
  107.                     renderDigit(i, data[i]);
  108.                 }
  109.                 //渲染小球
  110.                 for (var i = 0; i < balls.length; i++) {
  111.                     cxt.beginPath();
  112.                     cxt.arc(balls[i].x, balls[i].y, R, 0, 2 * Math.PI);
  113.                     cxt.fillStyle = balls[i].color;
  114.                     cxt.closePath();
  115.                     cxt.fill();
  116.                 }
  117.             }
  119.             clearInterval(oTimer);
  120.             var oTimer = setInterval(function() {
  121.                 //更新时钟
  122.                 updateDigitTime();
  123.                 //更新小球状态
  124.                 updateBalls();
  125.                 //渲染
  126.                 render();
  127.             }, 50);
  128.         }
  130.     </script>

特别说明

canvas的宽度调整时钟的大小，用例详见index.html。