创建文字雨滴动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45459904/article/details/100131997

本文详细介绍了如何使用JavaScript和CSS实现动态的文字雨滴效果，通过编程技巧让文字如同雨滴般从屏幕顶部连续落下，营造出视觉上的创新体验。

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

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>文字雨滴效果</title>  
    <style type="text/css">  
        *{padding:0;margin:0}  
        html{overflow:hidden}  
    </style>  
</head>  
<body>  
<div id="test"></div>  
<br>  
<input onclick="operateAnimation(this)" id="operate" type="button" value="暂停" />  
<br>  
<canvas id="canvas" style="background:#000"></canvas>  
<script type="text/javascript">  
  
//    window.onload = function(){  
        //获取画布对象  
        var canvas = document.getElementById("canvas");  
        //获取画布的上下文  
        var context =canvas.getContext("2d");  
        //获取浏览器屏幕的宽度和高度,这里控制显示的宽度和高度，且涵盖所有浏览器 */  
        var W = window.innerWidth  
                || document.documentElement.clientWidth  
                || document.body.clientWidth;  
        var H = window.innerHeight  
                || document.documentElement.clientHeight  
                || document.body.clientHeight;  
        //c.width = 300;  
        //c.height = 300;  
        //ctx.fillStyle = "1cba9c";  
        //ctx.fillRect(0,0,100,100);  
        //ctx.fillStyle = "ecb69c";  
        //ctx.fillText("雨滴",10,90);  
  
  
        //设置canvas的宽度和高度  
        canvas.width = W;  
        canvas.height = H;  
        //每个文字的字体大小  
        var fontSize = 16;  
        //计算列  
        var colunms = Math.floor(W /fontSize);  
        //Math.floor() === 向下取整  
        //记录每列文字的y轴坐标  
        var drops = [];  
        //给每一个文字初始化一个起始点的位置  
        for(var i=0;i<colunms;i++){  
            drops.push(0);  
        }  
        console.log(drops)  
        //运动的文字  
        var str ="显示的运动字体";  
        //4:fillText(str,x,y);原理就是去更改y的坐标位置  
        //绘画的函数  
        function draw(){  
            //黑BG的帆布  
            //半透明BG显示轨迹  
            context.fillStyle = "rgba(0,0,0,0.05)";  
            context.fillRect(0,0,W,H);  
            //给字体设置样式  
            context.font = "700 "+fontSize+"px  微软雅黑";  
            //给字体添加颜色  
            context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色，十六进制颜色  
            循环字体---写入画布中  
            for(var i=0;i<colunms;i++){  
                //随机汉字打印  
                var index = Math.floor(Math.random() * str.length);  
                //Math.random()方法可返回介于 0 ~ 1 之间的一个随机数  
                //index为随机整数  
                var x = i*fontSize;//x坐标  
                var y = drops[i] *fontSize;//y坐标  
                context.fillText(index,x,y);  
                //如果要改变时间，肯定就是改变每次他的起点  
                //在屏幕上划线后，把它的顶部随机发送到顶部  
                //将一个随机性添加到复位中，使分散在轴上的下降  
                if(y >= canvas.height && Math.random() > 0.99){  
                    drops[i] = 0;  
                }  
                //增加的Y坐标  
                drops[i]++;  
            }  
        };  
        draw();  
        var intervalId = setInterval(draw,30);  
  
        // 测试效果开始/暂停  
        function operateAnimation(objBtn){  
            var operate = document.getElementById("operate");  
  
            if(objBtn.value == "开始"){  
                objBtn.value = "暂停";  
                intervalId = setInterval(draw,30);  
            }else{  
                objBtn.value = "开始";  
                clearInterval(intervalId);  
            }  
            return false;  
        }  
  
//    };  
  
  
</script>  
</body>  
</html>