DigitalRain

功能描述

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

#依赖插件 ./libs/base.js

快速使用

## demo


<div style="text-align: center; margin-top:0;">
  <canvas id="canvas"></canvas>
</div>

window.onload = function() {
    var canv = document.getElementById('canvas');
    var cw = document.documentElement.clientWidth;
    var ch = document.documentElement.clientHeight;
    canv.width = cw;
    canv.height = "667";
    var bc = 120;
    var bcIndex = 5;
    var shadowBlur = 2;
    var sbIndex = 0.4;
    var fh = 210;
    var ctx = canv.getContext('2d');
    var fontSize = 20;
    var columns = Math.ceil(cw / fontSize); //计算适合的列数
    var arr = [];

    var texts = '';
    for (var i = 0; i < columns; i++) {
        arr[i] = 1;
    }

    //数字转ascii 字母
    function time() {
        var d = new Date();
        console.log(d.getTime());
        return d.getTime();
    }

    function color() {
        return "#" + Math.round(Math.random() * 255).toString(16) + Math.round(Math.random() * 255).toString(16) + Math.round(Math.random() * 255).toString(16);
    }

    function run() {

        texts = time().toString().split(""); //字符源

        ctx.fillStyle = "rgba(0,0,0,0.08)";

        ctx.fillRect(0, 0, canv.width, canv.height);
        // ctx.fillStyle = "#ff0000";
        ctx.fillStyle = color();
        ctx.font = fontSize + "px Arial";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        for (var i = 0; i < arr.length; i++) {
            var text = texts[Math.floor(Math.random() * texts.length)];
            ctx.fillText(text, i * fontSize, arr[i] * fontSize);
            if (arr[i] * fontSize > ch || Math.random() > 0.95) {
                arr[i] = 0;
            }
            arr[i]++;
        }

        drawText();

        window.onresize = function() {
            cw = document.documentElement.clientWidth;
            ch = document.documentElement.clientHeight;
            canv.width = cw;
            canv.height = ch;
            columns = Math.ceil(cw / fontSize);
            arr = [];
            for (var i = 0; i < columns; i++) {
                arr[i] = 1;
            }

        }
    }

    function drawText() {
        ctx.save();
        var title = "";
        var title2 = "";
        ctx.fillStyle = "rgba(0,24,0,1)";
        ctx.font = fh + "px Arial";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fontWeight = 900;
        ctx.shadowOffsetY = 0;

        //字体阴影宽度变化
        shadowBlur += sbIndex;
        ctx.shadowBlur = shadowBlur;
        if (shadowBlur >= 14) {
            sbIndex *= -1
        } else if (shadowBlur <= 0) {
            sbIndex *= -1;
        }
        //字体阴影颜色变化
        bc += bcIndex;
        ctx.shadowColor = 'rgba(0,' + bc + ',0,1)';
        if (bc >= 255) {
            bcIndex *= -1;
        } else if (bc <= 115) {
            bcIndex *= -1;
        }

        ctx.fillText(title, cw / 2, ch / 2 - 55);
        ctx.font = 80 + "px Arial";
        ctx.fillText(title2, cw / 2, ch / 2 + 45);
        ctx.restore();
    }
    setInterval(run, 40);


}

特别说明

用例详见index.html。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18