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

来源：互联网发布：阿里云快照是什么意思编辑：程序博客网时间：2024/06/05 20:13

效果演示地址:原生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);

阅读全文

0 0