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


Posted in Javascript onMarch 17, 2020

我们先看看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 ? 0 : 1 //随机生成0或者1
     text: ["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特效请查看下面的相关链接

Javascript 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
jQuery 解析xml文件
Aug 09 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
JavaScript实现横版菜单栏
Mar 17 #Javascript
JavaScript实现留言板案例
Mar 17 #Javascript
es6函数之严格模式用法实例分析
Mar 17 #Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 #Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 #Javascript
JS前端模块化原理与实现方法详解
Mar 17 #Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 #Javascript
You might like
基于PHP常用函数的用法详解
2013/05/10 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
禁止你的左键复制实用技巧
2013/01/04 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
vue组件的写法汇总
2018/04/12 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
python生成随机红包的实例写法
2019/09/02 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
Python如何实现线程间通信
2020/07/30 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
成品库仓管员岗位职责
2014/04/06 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
经理助理岗位职责
2015/02/02 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript