Canvas实现黑客帝国文字坠落效果

最新推荐文章于 2023-01-07 12:45:21 发布

魔数师

最新推荐文章于 2023-01-07 12:45:21 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 黑客帝国文字坠落

本文链接：https://blog.youkuaiyun.com/qq_29534705/article/details/80660898

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用JavaScript实现经典的黑客帝国电影中文字坠落特效。通过Canvas API，详细阐述关键代码和实现步骤，助你打造属于自己的动态文字瀑布。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//定义一个Canvas【相当于画布】
<canvas id="canvas">canvas</canvas>
  //背景音乐
    <embed height="100" width="100" src="#"/>

    <script type="text/javascript">

            //获取canvas的上下文
            var canvas = document.getElementById("canvas"),
              ctx = canvas.getContext("2d");
            setSize();
            var txt = "傻媳妇你今天在干嘛";
            var arr = txt.split("");
            var font_size = 16;
            var column  = Math.floor(canvas.width/font_size);
            var drop = [];
            for(let i = 0;i<column ; i++){
                drop[i] = 1;
            }

            init();
            //初始化
            function  init() {
                setSize();
                setInterval(draw,50)
            }
            //输入文字
            function  draw() {
                ctx.fillStyle = "rgba(0,0,0,0.05)";
                ctx.fillRect(0,0,canvas.width,canvas.height);

                ctx.fillStyle = "#0f0";//文字颜色
                ctx.font = font_size +"px arial";
                //逐行输出文字、
                for (var i = 0 ;i<drop.length;i++){
                    //随机输出文字
                    var text = arr[Math.floor(Math.random()*arr.length)];
                                 //输出文字,重新计算坐标
                    ctx.fillText(text,i*font_size,drop[i]*font_size);

                    if(drop[i]*font_size >canvas.height || Math.random()>0.9){
                        drop[i] =0;
                    }
                    drop[i]++;
                }
            }
            //重新计算画布大小
            window.onresize = function () {
                setSize();
            }
            //设置画布大小
            function setSize() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }

    </script>

附上效果图
这里写图片描述