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

作者：凡人多烦事01 | 2024-06-15 16:31:42

踩

字符矩阵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">
    <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 = ['声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】

推荐阅读

相关标签