文字雨滴，很酷炫的效果！

客官°小女子只卖身不卖艺 2024-04-17 19:19 61阅读 0赞

html

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Html5下炫酷文字雨滴效果_简单实现</title>
    </head>
    <body bgcolor="#00008b">
     <div id="test"></div>
      <br>
     <input οnclick="operateAnimation(this)" id="operate" type="button" value="暂停" />
     <br>
     <canvas id="c"></canvas>
    <script language="JavaScript" src="js/app.js">
    </script>
    </body>
    </html>

js

var test = document.getElementById("test");
    var str = "str";
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
    c.width = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
    c.height = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
     var chinese = "炫酷雨滴";
    chinese = chinese.split("");
    var fsize = 20;
     columns = c.width / fsize;
    var drops=[];
    for(var x=0;x<columns;x++) {
        drops[x] = 0;
    }
    function draw(){
        ctx.fillStyle="rgba(0,0,0,0.09)";
        ctx.fillRect(0,0, c.width, c.height);
        ctx.fillStyle="#0f0";
        ctx.font = fsize + "px arial";// arial is font
       for(var i=0;i<drops.length;i++){
            var text = chinese[Math.floor(Math.random()*chinese.length)];
            ctx.fillText(text,i*fsize,drops[i]*fsize);
            drops[i]++;
            if(drops[i]*fsize > c.height && Math.random() > 0.9){
                drops[i] = 0;
        }
        str = drops[i]+",";
        test.innerText = columns + " , i:" + str;// 测试数据
    }
    var intervalId = setInterval(draw,50);// 这里修改控制速度
    function operateAnimation(objBtn){
       var operate = document.getElementById("operate");
       f(objBtn.value == "开始"){
            objBtn.value = "暂停";
            intervalId = setInterval(draw,30);
        }else{
            objBtn.value = "开始";
            clearInterval(intervalId);
        }
        return false;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f2a9fd1717594a2da275b75ca2aa03b3.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter 实现酷炫的3D效果

![20200723074723347.png][] > 老孟导读：此文讲解3个酷炫的3D动画效果。下面是要实现的效果： ![20200723074724336.png

痛定思痛。/ 2023年03月01日 08:45/ 0 赞/ 509 阅读

相关 10 个效果酷炫的 Linux 命令

![format_png][] 想想电影黑客帝国中的画面，估计会令很多人都叹为观止，其实最简单的只要会使用Linux操作系统就可以是简单的实现电脑屏幕的字符串雨了！是不是很高

蔚落/ 2022年12月29日 04:43/ 0 赞/ 183 阅读

相关【Flutter 实战】酷炫的开关动画效果

![2020112706405953.png][] > 此动画效果是我在浏览文章时发现的一个非常酷炫的效果，于是就使用 Flutter 实现了。更多动画效果及Flutter

妖狐艹你老母/ 2022年12月24日 05:54/ 0 赞/ 164 阅读

相关玻璃雨滴效果

[https://gumroad.com/debugart?recommended\_by=library][https_gumroad.com_debugart_recomm

系统管理员/ 2022年12月05日 05:18/ 0 赞/ 144 阅读

相关炫酷canvas网页背景动画效果

[下载地址][Link 1]非常炫酷的网页背景旋转特效，基于canvas画布实现的网页背景动画效果 ![1630026833.png][] dd: [Link 1]:

雨点打透心脏的1/2处/ 2022年09月08日 14:59/ 0 赞/ 353 阅读

相关雨滴效果

一、效果图：（这是我做的一个创意app里面的一个画面，这个界面我也在修改中） ![SouthEast][] 二、我是从OpenGL中学到的算法，然后应用在Androi

分手后的思念是犯贱/ 2022年08月05日 13:18/ 0 赞/ 150 阅读

相关使用CoordinatorLayout打造各种炫酷的效果

[使用CoordinatorLayout打造各种炫酷的效果][CoordinatorLayout] [自定义Behavior —— 仿知乎，FloatActionButton

布满荆棘的人生/ 2022年07月15日 14:21/ 0 赞/ 282 阅读

相关 Android实现炫酷的CheckBox效果

首先贴出实现的效果图： ![2016101183718428.gif_201691183728][] gif的效果可能有点过快，在真机上运行的效果会更好一些。我们主要的思路

梦里梦外;/ 2022年06月16日 03:44/ 0 赞/ 389 阅读

相关比较酷炫的css鼠标悬浮效果

效果如下： ![20180308000101980][] 原文链接：[https://zhuanlan.zhihu.com/p/34173506][https_zhu

妖狐艹你老母/ 2022年05月30日 07:49/ 0 赞/ 292 阅读

相关 CSS实现文字动画炫酷效果

span{ //设置文字动画背景动图 background:url(https://www.17sucai.com/preview/776331/2

素颜马尾好姑娘i/ 2021年09月01日 10:47/ 0 赞/ 633 阅读