【JS】代码雨特效

一时失言乱红尘 2023-03-04 09:15 32阅读 0赞

##### html代码 #####

<canvas id="code_rain_canvas" width="1440" height="900"></canvas>

##### js 代码 #####

window.onload = function() {
             //获取画布对象
             var canvas = document.getElementById("code_rain_canvas");
             //获取画布的上下文
             var context = canvas.getContext("2d");
             var s = window.screen;
             var W = canvas.width = s.width;
             var H = canvas.height;
             //获取浏览器屏幕的宽度和高度
             //var W = window.innerWidth;
             //var H = window.innerHeight;
             //设置canvas的宽度和高度
             canvas.width = W;
             canvas.height = H;
             //每个文字的字体大小
             var fontSize = 12;
             //计算列
             var colunms = Math.floor(W / fontSize);
             //记录每列文字的y轴坐标
             var drops = [];
             //给每一个文字初始化一个起始点的位置
             for (var i = 0; i < colunms; i++) {
                 drops.push(0);
             }
             //运动的文字
             var str = "WELCOME TO WWW.ITRHX.COM";
             //4:fillText(str,x,y);原理就是去更改y的坐标位置
             //绘画的函数
             function draw() {
                 context.fillStyle = "rgba(238,238,238,.08)"; //遮盖层
                 context.fillRect(0, 0, W, H);
                 //给字体设置样式
                 context.font = "600 " + fontSize + "px  Georgia";
                 //给字体添加颜色
                 context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)]; //randColor();可以rgb,hsl, 标准色，十六进制颜色
                 //写入画布中
                 for (var i = 0; i < colunms; i++) {
                     var index = Math.floor(Math.random() * str.length);
                     var x = i * fontSize;
                     var y = drops[i] * fontSize;
                     context.fillText(str[index], x, y);
                     //如果要改变时间，肯定就是改变每次他的起点
                     if (y >= canvas.height && Math.random() > 0.99) {
                         drops[i] = 0;
                     }
                     drops[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, 35);
         };

##### 展示效果： #####

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

[aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuLzIwMjAwNjI5MTcxOTMwNDQ0LmdpZg]: /images/20230208/14c350aedcba4b2195f41f7a0dcff170.png

发表评论取消回复

表情：

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

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

相关阅读

相关 (js特效) js代码实现图片切换

图效果： ![Center][] 页面代码： <%@ page language="java" import="java.util.*" pageEncod...

朴灿烈づ我的快乐病毒、/ 2024年04月17日 23:13/ 0 赞/ 88 阅读

相关 (js特效) js代码实现弹出层

源代码： <html> <head> <title>LIGHTBOX EXAMPLE</title> <meta http-equiv="Co

深藏阁楼爱情的钟/ 2023年10月16日 23:21/ 0 赞/ 42 阅读

相关 Java代码雨。黑客帝国（电影）同款代码雨。

package cn.tedu.day03; import java.awt.; import java.awt.event.ActionEvent

待我称王封你为后i/ 2023年07月22日 09:12/ 0 赞/ 17 阅读

相关【JS】代码雨特效

html代码 <canvas id="code_rain_canvas" width="1440" height="900"></canvas> js 代码

一时失言乱红尘/ 2023年03月04日 09:15/ 0 赞/ 33 阅读

相关 ShaderJoy —— 简单的粒子雨特效【GLSL】

效果图 ![20210207180928751.gif][] 粒子雨效果完整代码和注释 define PI 3.14159 define TAU

绝地灬酷狼/ 2022年10月29日 01:57/ 0 赞/ 284 阅读

相关 C/C++——黑客数字雨特效

实现效果如图: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

心已赠人/ 2022年10月15日 10:48/ 0 赞/ 158 阅读

相关 JavaScript鼠标跟随粒子js特效代码

[下载地址][Link 1] 交互式的网页特效，好像星座特效一样在鼠标移动的时候自动生成连接粒子特效。 ![1633956823.png][] dd: [Link 1

╰半橙微兮°/ 2022年09月16日 04:50/ 0 赞/ 255 阅读

相关 js实现黑客代码雨效果

效果他是动的哈，上传gif太大，CSDN不让传，所以只放了图片 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2

墨蓝/ 2022年09月14日 09:16/ 0 赞/ 186 阅读

相关搜索框CSS3动画js特效代码

[下载地址][Link 1]效果很酷的搜索框展开效果，使用纯css3代码实现的动画效果，默认的搜索按钮，点击出现输入框。 ![1631277677.png][] dd:

电玩女神/ 2022年09月11日 02:29/ 0 赞/ 231 阅读

相关纯css3流星雨js特效代码

[下载地址][Link 1]一款逼真的流星雨特效代码，使用纯css3代码实现的流星雨特效。 ![1630566253.png][] dd: [Link 1]: http

一时失言乱红尘/ 2022年09月10日 06:25/ 0 赞/ 235 阅读