杰晶网络

HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）
网络编程 2025/11/1 佚名
3 2

我们先看看HTML+JS实现“代码雨”的最终效果

1、绿色：

HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

2、彩色：

HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

3、背景色：

HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

4、绿色逐渐变浅：

HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

源代码：

<!DOCTYPE html>
<html>
  
<head> 
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>Code -by ZhenYu.Sha</title>
 <style type="text/css">
  html, body {
   width: 100%;
   height: 100%;
  }
  body {
   background: #000;
   overflow: hidden;
   margin: 0;
   padding: 0;
  }
 </style>
</head>
  
<body> 
<canvas id="cvs"></canvas>
<script type="text/javascript">
 var cvs = document.getElementById("cvs");
 var ctx = cvs.getContext("2d");
 var cw = cvs.width = document.body.clientWidth;
 var ch = cvs.height = document.body.clientHeight;
 //动画绘制对象
 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 var codeRainArr = []; //代码雨数组
 var cols = parseInt(cw / 14); //代码雨列数
 var step = 16;  //步长，每一列内部数字之间的上下间隔
 ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑
 
 function createColorCv() {
  //画布基本颜色
  ctx.fillStyle = "#242424";
  ctx.fillRect(0, 0, cw, ch);
 }
 
 //创建代码雨
 function createCodeRain() {
  for (var n = 0; n < cols; n++) {
   var col = [];
   //基础位置，为了列与列之间产生错位
   var basePos = parseInt(Math.random() * 300);
   //随机速度 3~13之间
   var speed = parseInt(Math.random() * 10) + 3;
   //每组的x轴位置随机产生
   var colx = parseInt(Math.random() * cw)
 
   //绿色随机
   var rgbr = 0;
   var rgbg = parseInt(Math.random() * 255);
   var rgbb = 0;
   //ctx.fillStyle = "rgb("+r+','+g+','+b+")"
 
   for (var i = 0; i < parseInt(ch / step) / 2; i++) {
    var code = {
     x: colx,
     y: -(step * i) - basePos,
     speed: speed,
     // text : parseInt(Math.random()*10)%2 == 0 "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //随机生成字母数组中的一个
     color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
    }
    col.push(code);
   }
   codeRainArr.push(col);
  }
 }
 
 //代码雨下起来
 function codeRaining() {
  //把画布擦干净
  ctx.clearRect(0, 0, cw, ch);
  //创建有颜色的画布
  //createColorCv();
  for (var n = 0; n < codeRainArr.length; n++) {
   //取出列
   col = codeRainArr[n];
   //遍历列，画出该列的代码
   for (var i = 0; i < col.length; i++) {
    var code = col[i];
    if (code.y > ch) {
     //如果超出下边界则重置到顶部
     code.y = 0;
    } else {
     //匀速降落
     code.y += code.speed;
    }
    
    //1 颜色也随机变化
    //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 
 
    //2 绿色逐渐变浅
    // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; 
 
    //3 绿色随机
    // var r= 0;
    // var g= parseInt(Math.random()*255) + 3;
    // var b= 0;
    // ctx.fillStyle = "rgb("+r+','+g+','+b+")";
 
    //4 一致绿
    ctx.fillStyle = code.color;
 
 
    //把代码画出来
    ctx.fillText(code.text, code.x, code.y);
   }
  }
  requestAnimationFrame(codeRaining);
 }
 
 //创建代码雨
 createCodeRain();
 //开始下雨吧 GO
 requestAnimationFrame(codeRaining);
</script>
  
</body>
</html>

本文主要介绍了HTML+JS实现“代码雨”效果源码，更多关于JS特效请查看下面的相关链接

标签：
JS代码雨效果,JS文字下落效果,黑客帝国文字下落
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2025/11/1

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网