黑客帝国代码雨JS，支持中文

最新推荐文章于 2024-05-15 19:54:08 发布

tianlunvip

最新推荐文章于 2024-05-15 19:54:08 发布

阅读量343

点赞数

本文链接：https://blog.csdn.net/tianlunvip/article/details/108764311

版权

有人要的HTML-JS版黑客帝国代码雨，支持自定义文字中文，保存HTML文件可运行。


<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="canonical" href="https://www.tianlunvip.com/demo/7115.html">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="网页特效,骇客帝国文字矩阵,骇客帝国文字代码雨">
<meta name="keywords" content="HTML5,canvas,JavaScript">
<meta name="author" content="tianlunvip@outlook.com">
<meta name="generator" content="tianlunvip">
<title>骇客帝国文字矩阵</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{overflow: hidden;}
</style>
</head>
<body>
<canvas id="matrixBG"></canvas>
<script type="text/javascript">

var canvas = document.getElementById("matrixBG");
var ctx  = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function random(min, max) {
    return Math.random()*(max-min)+min;
}

var Matrix = (function() {

    function Matrix(element) {
            this.x = element.x                    // 初始X位置 每间隔一个文字元素
            this.y = element.y                    // 初始X位置 每间隔一个文字元素
            this.ctx = element.ctx
    }

    Matrix.prototype = {

        constructor: Matrix,

        init: function() {    
            this.text = ""                          // 自定义文本内容
            this.text_lenght = random(10, 40);      // 文本长度
            this.speed = random(15, 30);;           // 落体速度
            this.text_pix = 16;                     // 单个文本像素宽高
            this.op = 1;                            // 初始透明度
            
            if(this.text == "") {                   // 如果未设置文本则生成随机

                for(var i = 0; i < this.text_lenght; i++) {
                    this.text += String.fromCharCode(30+Math.floor( Math.random()*95 ));
                }  

            } else {

                if(this.text.length < this.text_lenght) {
                    var l = Math.ceil(this.text_lenght / this.text.length);
                    this.text = this.text.repeat(l);
                }
 
                this.text = this.text.substring(0, this.text_lenght);
            }
        },
        
        draw: function() {

            this.ctx.font = '10pt Georgia';

            var l = this.text_lenght * this.text_pix;       // 字体显示总长度
            var y = this.y > l ? l : this.y;                // 当前显示字体的长度

            var loop = Math.ceil(y / this.text_pix);        // 当前显示字体的个数
            
            for(var i = 0; i < loop; i++) {
                
                var op = this.op - (1/loop)*(i + 1);        // 当前透明度

                this.ctx.fillStyle='rgba(0,255,0,'+ op +')';
                var text = this.text.charAt(random(0, this.text_lenght-1));    // 可设置为固定文本
                this.ctx.fillText(text, this.x, this.y-(i*this.text_pix));

            }
        },
        
        update: function() {
            
            var l = this.text_lenght * this.text_pix;
            this.y += this.speed;
            
            if(this.y > l) {                // 如果字体全部显示 可降低透明度
                // this.op -= 0.03;
            }

            if((this.y - l) >= window.innerHeight || this.op <= 0) {
                this.y = 0;
                this.init();
            }
        }
    }
    
    return Matrix;
})();


var MatrixControl = (function(){
    
    function MatrixControl(element) {
        this.matrixs = []
        this.ctx = element.ctx
    }    

    MatrixControl.prototype = {

        constructor: MatrixControl,
        
        
        // 根据参数，创建雨滴
        createMatrix: function() {
            var oThis = this;
            var oI = 0;
            for (var i = 0; i < window.innerWidth; i+=16) {
                var matirxObj = new Matrix({x: i, y: random(-500, 0),ctx: oThis.ctx})
                matirxObj.init()
                oThis.matrixs.push(matirxObj)
            }
        },
        

        animation: function() {
            var oThis = this;
            setInterval(function(){
                oThis.ctx.fillStyle='rgb(0,0,0)';
                oThis.ctx.fillRect(0,0,window.innerWidth,window.innerHeight);

                for (var i = 0; i < oThis.matrixs.length; i++) {

                    oThis.matrixs[i].update();
                    oThis.matrixs[i].draw()
                }
            }, 120)
        },
        
        // 整合方法
        start: function() {
            this.createMatrix()
            this.animation()
        }    
    }

    return MatrixControl;
    
})();

const matrixObj = new MatrixControl({ctx: ctx})
matrixObj.start();

</script>
</body>
</html>

tianlunvip

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
黑客帝国代码雨JS，支持中文

有人要的HTML-JS版黑客帝国代码雨，支持自定义文字中文，保存HTML文件可运行。<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><link rel="canonical" href="https://www.tianlunvip.co
复制链接

扫一扫