JS原生再现黑客帝国文字矩阵

最新推荐文章于 2022-04-05 19:07:09 发布

财富自由不是梦

最新推荐文章于 2022-04-05 19:07:09 发布

阅读量221

点赞数

分类专栏： JavaScript 前段网页特效文章标签： javascript

本文链接：https://blog.csdn.net/qq_44760844/article/details/115410795

版权

JavaScript 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

前段

2 篇文章 0 订阅

订阅专栏

网页特效

1 篇文章 0 订阅

订阅专栏

黑客帝国文字矩阵

废话不多说直接上完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas{
            /* 默认 300x150  canvas不能在CSS中设置宽高 */
            background-color: pink;
        }
    </style>

</head>
<body>
    <canvas width="200" height="200"></canvas>
    <script>
        //1.画布
        let canvas = document.querySelector('canvas');
        //2.画笔 2d 平面
        let ctx = canvas.getContext('2d');
        //获取浏览器的宽 和 高 赋值 画布 获取可见区域的大小
        let ww = document.documentElement.clientWidth;
        let hh = document.documentElement.clientHeight;
        //赋值
        canvas.width = ww;
        canvas.height = hh;
        //1.绘制的文字  2.X轴的位置  3.Y轴的位置
        //每个字的大小
        let fontSize = 20;
        //一行可以放多少个字  进行取整  73.123456  向上  74   向下  73
        let clos = Math.floor(ww/fontSize);
        let num = [];
        for(let i = 0; i < clos; i++){
            num.push(0);//放入0
        }   

        //2.绘制文字的函数
        function draw(){
            //幕布效果  颜色
            ctx.fillStyle = 'rgba(0,0,0,0.05)';//每绘制一次+0.05
            //幕布绘制的位置  从X  0  Y  0  到  X  ww  Y  hh  结束
            ctx.fillRect(0,0,ww,hh);

            //创建一个数字组存放特效字符
            let sec = ['🌟','🌞','✨','☔','😹'];//可自行添加自己喜欢的特效字符
            for(let i = 0; i < sec.length; i++){
                let s = Math.floor(Math.random() * sec.length);
                str = sec[s];
            }

            // let str = '❆';//不使用数组的请况
            ctx.font = '600 '+fontSize+'px 微软雅黑'
            ctx.fillStyle = '#fff'
            
            for(let i = 0; i < clos; i++){
                let x = i * fontSize;
                let y = num[i] * fontSize;
                ctx.fillText(str,x,y);//核心代码  方法  每次  写一个字
                num[i]++;
                if(y > hh && Math.random() > 0.995){
                    num[i] = 0;
                }
            }
        }
        setInterval(draw,100);
    </script>
</body>
</html>

效果图

在这里插入图片描述

文字特效字符链接
文字特效字符地址
初写博客希望大家多多支持，在此附上保运符

//博客地址：https://blog.csdn.net/qq_44760844?spm=1001.2100.3001.5343
//
//                            _ooOoo_
//                           o8888888o
//                           88" . "88
//                           (| -_- |)
//                           O\  =  /O
//                        ____/`---'\____
//                      .'  \\|     |//  `.
//                     /  \\|||  :  |||//  \
//                    /  _||||| -:- |||||-  \
//                    |   | \\\  -  /// |   |
//                    | \_|  ''\---/''  |   |
//                    \  .-\__  `-`  ___/-. /
//                  ___`. .'  /--.--\  `. . __
//               ."" '<  `.___\_<|>_/___.'  >'"".
//              | | :  `- \`.;`\ _ /`;.`/ - ` : | |
//              \  \ `-.   \_ __\ /__ _/   .-` /  /
//         ======`-.____`-.___\_____/___.-`____.-'======
//                            `=---='
//        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//                      Buddha Bless, No Bug !
//
//                       .::::.
//                     .::::::::.
//                    :::::::::::
//                 ..:::::::::::'
//              '::::::::::::'
//                .::::::::::
//           '::::::::::::::..
//                ..::::::::::::.
//              ``::::::::::::::::
//               ::::``:::::::::'        .:::.
//              ::::'   ':::::'       .::::::::.
//            .::::'      ::::     .:::::::'::::.
//           .:::'       :::::  .:::::::::' ':::::.
//          .::'        :::::.:::::::::'      ':::::.
//         .::'         ::::::::::::::'         ``::::.
//     ...:::           ::::::::::::'              ``::.
//    ````':.          ':::::::::'                  ::::..
//                       '.:::::'                    ':'````..
//
//
//      ┏┛ ┻━━━━━┛ ┻┓
//      ┃　　　　　　 ┃
//      ┃　　　━　　　┃
//      ┃　┳┛　  ┗┳　┃
//      ┃　　　　　　 ┃
//      ┃　　　┻　　　┃
//      ┃　　　　　　 ┃
//      ┗━┓　　　┏━━━┛
//        ┃　　　┃   神兽保佑
//        ┃　　　┃   代码无BUG！
//        ┃　　　┗━━━━━━━━━┓
//        ┃　　　　　　　    ┣┓
//        ┃　　　　         ┏┛
//        ┗━┓ ┓ ┏━━━┳ ┓ ┏━┛
//          ┃ ┫ ┫   ┃ ┫ ┫
//          ┗━┻━┛   ┗━┻━┛

财富自由不是梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS原生再现黑客帝国文字矩阵

黑客帝国文字矩阵废话不多说直接上完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&
复制链接

扫一扫