DigitalRain

功能描述

彩色数字雨，根据毫秒生成的数字。

依赖模块

./libs/base.js

快速使用

  1. ## demo
  2. <div style="text-align: center; margin-top:0;">
  3.   <canvas id="canvas"></canvas>
  4. </div>
  6. window.onload = function() {
  7.     var canv = document.getElementById('canvas');
  8.     var cw = document.documentElement.clientWidth;
  9.     var ch = document.documentElement.clientHeight;
  10.     canv.width = cw;
  11.     canv.height = "667";
  12.     var bc = 120;
  13.     var bcIndex = 5;
  14.     var shadowBlur = 2;
  15.     var sbIndex = 0.4;
  16.     var fh = 210;
  17.     var ctx = canv.getContext('2d');
  18.     var fontSize = 20;
  19.     var columns = Math.ceil(cw / fontSize); //计算适合的列数
  20.     var arr = [];
  22.     var texts = '';
  23.     for (var i = 0; i < columns; i++) {
  24.         arr[i] = 1;
  25.     }
  27.     //数字转ascii 字母
  28.     function time() {
  29.         var d = new Date();
  30.         console.log(d.getTime());
  31.         return d.getTime();
  32.     }
  34.     function color() {
  35.         return "#" + Math.round(Math.random() * 255).toString(16) + Math.round(Math.random() * 255).toString(16) + Math.round(Math.random() * 255).toString(16);
  36.     }
  38.     function run() {
  40.         texts = time().toString().split(""); //字符源
  42.         ctx.fillStyle = "rgba(0,0,0,0.08)";
  44.         ctx.fillRect(0, 0, canv.width, canv.height);
  45.         // ctx.fillStyle = "#ff0000";
  46.         ctx.fillStyle = color();
  47.         ctx.font = fontSize + "px Arial";
  48.         ctx.textAlign = 'center';
  49.         ctx.textBaseline = 'middle';
  50.         for (var i = 0; i < arr.length; i++) {
  51.             var text = texts[Math.floor(Math.random() * texts.length)];
  52.             ctx.fillText(text, i * fontSize, arr[i] * fontSize);
  53.             if (arr[i] * fontSize > ch || Math.random() > 0.95) {
  54.                 arr[i] = 0;
  55.             }
  56.             arr[i]++;
  57.         }
  59.         drawText();
  61.         window.onresize = function() {
  62.             cw = document.documentElement.clientWidth;
  63.             ch = document.documentElement.clientHeight;
  64.             canv.width = cw;
  65.             canv.height = ch;
  66.             columns = Math.ceil(cw / fontSize);
  67.             arr = [];
  68.             for (var i = 0; i < columns; i++) {
  69.                 arr[i] = 1;
  70.             }
  72.         }
  73.     }
  75.     function drawText() {
  76.         ctx.save();
  77.         var title = "";
  78.         var title2 = "";
  79.         ctx.fillStyle = "rgba(0,24,0,1)";
  80.         ctx.font = fh + "px Arial";
  81.         ctx.textAlign = 'center';
  82.         ctx.textBaseline = 'middle';
  83.         ctx.fontWeight = 900;
  84.         ctx.shadowOffsetY = 0;
  86.         //字体阴影宽度变化
  87.         shadowBlur += sbIndex;
  88.         ctx.shadowBlur = shadowBlur;
  89.         if (shadowBlur >= 14) {
  90.             sbIndex *= -1
  91.         } else if (shadowBlur <= 0) {
  92.             sbIndex *= -1;
  93.         }
  94.         //字体阴影颜色变化
  95.         bc += bcIndex;
  96.         ctx.shadowColor = 'rgba(0,' + bc + ',0,1)';
  97.         if (bc >= 255) {
  98.             bcIndex *= -1;
  99.         } else if (bc <= 115) {
  100.             bcIndex *= -1;
  101.         }
  103.         ctx.fillText(title, cw / 2, ch / 2 - 55);
  104.         ctx.font = 80 + "px Arial";
  105.         ctx.fillText(title2, cw / 2, ch / 2 + 45);
  106.         ctx.restore();
  107.     }
  108.     setInterval(run, 40);
  111. }

特别说明

用例详见index.html。