黑客帝国特效代码

最新推荐文章于 2024-05-17 09:11:49 发布

润桦铧骅哗烨

最新推荐文章于 2024-05-17 09:11:49 发布

阅读量3k

点赞数

文章标签：特效 canvas绘制

本文链接：https://blog.csdn.net/qq_39492840/article/details/86649860

版权

<!DOCTYPE html>
<html>
<head>
    <title>黑客帝国效果</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .error{
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 150px;
            font-weight: bolder;
            color: red;
            transform: translate(-50%,-50%);
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="error">404</div>
    <script>
        // 获取canvas元素，并为该元素创建一个2d绘图环境
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

        // 使canvas元素撑满整个页面
        canvas.width=window.innerWidth;
        canvas.height=window.innerHeight;

        // 创建数字数组
        var texts='0123456789'.split('');

        // 计算一行应该有多少个数字
        var fontSize=16;
        var columns=canvas.width/fontSize;

        // 创建drops数组,用于记录每一列当前拥有的数字数目，每项初始化为1
        var drops=[];
        for(var i=0;i<columns;i++){
            drops[i]=1;
        }

        //定义绘制函数draw
        function draw(){
            //使得背景颜色为黑
            ctx.fillStyle='rgba(0,0,0,0.05)';
            ctx.fillRect(0,0,canvas.width,canvas.height);

            // 随后背景颜色变透明，文字改为绿色
            ctx.fillStyle= '#0f0';
            ctx.font=fontSize+"px arial";

            for(var i=0;i<drops.length;i++){
                var text=texts[Math.floor(Math.random()*texts.length)];//从数字数组中随机取一个数字
                ctx.fillText(text,i*fontSize,drops[i]*fontSize);//绘制文字
                if(drops[i]*fontSize>canvas.height||Math.random()>0.95){
                    drops[i]=0;
                }
                drops[i]++;
            }

        }
        setInterval(draw,33);
    </script>
</body>

实现效果如下：

润桦铧骅哗烨

关注

0
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
黑客帝国特效代码

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;黑客帝国效果&lt;/title&gt; &lt;style&gt; body{ margin: 0; padding: 0; overflow: hidden; ...
复制链接

扫一扫