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 相关文章推荐
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
php htmlspecialchars加强版
2010/02/16 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP的反射机制实例详解
2017/03/29 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python for循环中的陷阱详解
2018/07/13 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
应聘医学检验人员自荐信
2013/09/27 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
承诺书模板
2014/08/30 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
个人整改措施书面材料
2014/10/24 职场文书
党员个人整改措施
2014/10/24 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS