显示毫秒的文字雨

Html

Css

window.onload = function() {
    var canv = document.getElementById('canvas');
    var cw = document.documentElement.clientWidth;
    var ch = document.documentElement.clientHeight;
    canv.width = cw;
    canv.height = "1000";
    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);

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

显示毫秒的文字雨



代码描述：文字雨根据毫秒数动态生成内容

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

我辈年轻

相关代码

显示毫秒的文字雨

最新