原生js实现帝国矩阵效果文字

最新推荐文章于 2024-07-31 08:44:27 发布

19年，重新开始写

最新推荐文章于 2024-07-31 08:44:27 发布

阅读量1.1k

点赞数

分类专栏：前端特效 html5+css3 文章标签：前端设计 javascript

本文链接：https://blog.csdn.net/qq_27905183/article/details/73010076

版权

html5+css3 同时被 2 个专栏收录

50 篇文章 0 订阅

订阅专栏

前端特效

3 篇文章 0 订阅

订阅专栏

效果演示地址:原生js实现帝国矩阵效果文字

实现代码

前端页面设计

<html>
    <head>
        <!--Style Link-->
        <link rel="stylesheet" href="index.css" />
        <!--JS Link-->
        <script src="index.js"></script>
    </head>
    <body>
        <audio src="the-mass.mp3"></audio>
        <canvas id="mycanvas"></canvas>
    </body>
</html>

样式设计

/*css code*/
*{
    margin: 0;
    padding: 0;
}
html{
    overflow: hidden;
}

js核心代码设计

//js code
//获取屏幕分辨率
var screen = window.screen;
var width = screen.width;
var height = screen.height;

//获取画布对象
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

//设置画布宽高
canvas.width = width;
canvas.height = height;

//定义要显示的文字内容
var drawstr = "兵来将挡水来土掩";
//设置文字字体大小
var fontSize = 24;

//计算页面总列数
var cols = Math.floor(width/fontSize);

//保存每列文字的纵坐标的数组(因为要设置纵坐标动态改变)
var drops = [];
for(var i=0; i<cols; i++)
    drops.push(0);

//绘画函数
function draw(){
    //开头设置一个rgba的颜色用于设置文字清楚之前显示的颜色虚化
    context.fillStyle = "rgba(0,0,0,.5)";
    context.fillRect(0,0,width,height);
    //文字实际颜色
    context.fillStyle = “green”;
    //设置文字样式
    context.font = "600 "+fontSize+"px 微软雅黑";

    for(var i=0; i<cols; i++){
        //指定每列随机显示的汉字位置
        var index = Math.floor(Math.random()*drawstr.length);
        //设置每列文字的位置
        var x = i*fontSize;
        var y = drops[i]*fontSize;
        //绘制文字
        context.fillRext(drawstr[index],x,y);
        //判断是否已经走到底了
        if(y > width)
            drops[i] = 0;
        else
            drops[i]++;
    }
}
draw();
window.setInterval(draw,33);