字幕雨的制作代码及录制

2024年5月6日 0条评论 132次阅读 0人点赞慕容

有时做混剪或者二创短视频的小伙伴会遇到原创度不足的问题，字幕雨可以在一定程度上提升视频的原创度，今天就来聊一下具体的做法。

制作字幕雨

学过网页制作的朋友一定不会陌生，其实所谓的字幕雨，就是指将一些文字或者字幕以雨的形式下落，就是一种网页动态特效，用JavaScript和CSS即可实现这种效果。以下为一个字幕雨的简单示例：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字母雨 </title>

   <style>
   	    body{margin: 0;
    padding: 0;
    background-color: #F7F7F7;
    overflow: hidden;}
   </style>

</head>
<body>
<!--代码雨区域-->
<canvas id="canvas" style="background:#000"></canvas>
<script>
    // 代码雨
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        // 浏览器宽高
     var H = window.screen.availHeight;
        var W =document.body.clientWidth; //网页可见区域宽
        canvas.width = W;
        canvas.height = H;
        var fontSize = 18;
        var colunms = Math.floor(W / fontSize);
        // 坐标
        var coordinate = [];
        for (var i = 0; i < colunms; i++) {
            coordinate.push(0);
        }
        var str = "qwertyuiop asdfghjkl zxcvbnm 0123456789";
        function draw() {
            // 背景色
            context.fillStyle = "rgba(0,0,0,0.05)";
            context.fillRect(0, 0, W, H);
            context.font = "800 " + fontSize + "px  宋体";
            // 字体颜色
            context.fillStyle =  randColor();
            //"#01fef5";
            for (var i = 0; i < colunms; i++) {
                var index = Math.floor(Math.random() * str.length);
                var x = i * fontSize;
                var y = coordinate[i] * fontSize;
                context.fillText(str[index], x, y);
                if (y >= canvas.height && Math.random() > 0.88) {
                    coordinate[i] = 0;
                }
                coordinate[i]++;
            }
        }

        function randColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

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