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操作JSON实例代码
Feb 09 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
js 实现碰撞检测的示例
Oct 28 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+javascript的日历控件
2009/11/19 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
js实现打字小游戏
2019/12/17 Javascript
python笔记(2)
2012/10/24 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python 异常处理的实例详解
2017/09/11 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python实现批量压缩图片
2018/01/25 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
2017/12/27 HTML / CSS
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
会计应聘求职信范文
2013/12/17 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
mysql sock 文件解析及作用讲解
2022/07/15 MySQL