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

网络编程 2024/12/24 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

1、绿色：

2、彩色：

3、背景色：

4、绿色逐渐变浅：

源代码：

<!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文字下落效果,黑客帝国文字下落

标签：

JS代码雨效果,JS文字下落效果,黑客帝国文字下落

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

暂无HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月24日

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

JS代码雨效果,JS文字下落效果,黑客帝国文字下落

vue+ESLint 配置保存自动格式化代码

JavaScript实现横版菜单栏

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接

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

JS代码雨效果,JS文字下落效果,黑客帝国文字下落

vue+ESLint 配置保存 自动格式化代码

JavaScript实现横版菜单栏

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接

vue+ESLint 配置保存自动格式化代码