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 相关文章推荐
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
Javascript读写cookie的实例源码
Mar 16 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
JS实现打砖块游戏
Feb 14 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
php5.3 废弃函数小结
2010/05/16 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Django发送邮件功能实例详解
2019/09/02 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
工商技校毕业生自荐信
2013/11/15 职场文书
生日派对邀请函
2014/01/13 职场文书
机修工工作职责
2014/02/21 职场文书
合作协议书范本
2014/04/17 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
二手车转让协议书
2015/01/29 职场文书
现货白银电话营销话术
2015/05/29 职场文书
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL