黑客帝国中的代码雨写法
代码雨
<!DOCTYPE html>
<html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>讲师:雨晨</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或者1text: ["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>
就是如此简单
黑客帝国中的代码雨写法相关推荐
- Python 实现 黑客帝国中的字符雨
本教程很简单吧,除了复制代码之外,希望你也抽点时间去看下"注意",教程很简单,有问题请留言 废话不多数,先上图 注意 本项目中,需要用到文件库"pygame", ...
- 《黑客帝国》中的代码雨让人身临其境!利用Python轻松实现!
前言 <黑客帝国>的一段代码雨片段让外行人感觉非常震撼,但其实利用咱们的Python来做出这个效果真的很简单! 今天就带大家把这个代码雨放在自己的显示器上面,亲身体验一把黑客的感觉! 环境 ...
- 《黑客帝国》中的代码雨让人身临其境 利用Python轻松实现
前言 <黑客帝国>的一段代码雨片段让外行人感觉非常震撼,但其实利用咱们的Python来做出这个效果真的很简单! 今天就带大家把这个代码雨放在自己的显示器上面,亲身体验一把黑客的感觉! 环境 ...
- 黑客帝国中代码雨如何实现?用 canvas 轻松实现代码雨炫酷效果!
目录 1 效果 2 用到的知识点 2.1 什么是 canvas标签? 2.1.1 创建一个画布(Canvas) 2.1.2 使用 JavaScript 来绘制图像 2.1.3 Canvas 坐标 2 ...
- 代码雨代码源复制_超火!黑客帝国代码雨
黑客帝国代码雨 相信看过<黑客帝国>的同学,对上面的的这个图片一定不陌生,这是一个非常经典的画面.在繁忙的工作之余,大家也要放松下自己,今天就给大家分享一下代码滚动的实现方法. 第一步,新 ...
- vbs代码炫酷效果_Python|实现黑客帝国代码雨效果
Python|实现黑客帝国代码雨效果 估计大家都看过电影<黑客帝国>吧,片中的一段代码雨片段实在是炫酷,试想一下,片中的代码雨效果在自己电脑屏幕上实现了会是一种什么样的感觉,会不会有种身临 ...
- 抖音黑客帝国代码雨——程序大神如何攻占抖音?简直不可思议!
在普通人的脑补中,程序员可能是这样的 不知道为什么,这张图总是能莫名触发技哥的笑点. 亦或是这样的 每天无休止的与代码和Bug打着交道-- 等等,这好像不对啊.当初看黑客帝国的时候可不是这么心酸的,看 ...
- <黑客帝国-代码雨>超火(免费送)
(刚学的,还有好多地方做的不完善,后期继续跟进,直接复制代码,后缀名改为:.html ,直接运行就可以看到效果啦!) 或者:使用HBuilder,创建HTML文件直接运行即可看到效果! <!DO ...
- Canvas修行之黑客帝国代码雨
既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...
- linux如何安装黑客帝国cmatrix代码雨效果
linux如何安装黑客帝国cmatrix代码雨效果 cmatrix常用命令 cmatrix下载:安装包 具体步骤 源码安装cmatrix 创建/usr/local/temp目录 mkdir -p /u ...
最新文章
- torch.roll
- java高效代码_Java工程师该如何编写高效代码?
- selenium webdrive 默认打开浏览器设置
- CF24D Broken robot | DP 高斯消元
- 从壹开始 [ Id4 ] 之一║ 授权服务器 IdentityServer4 开篇讲计划书
- HTML5如何控制暂停播放停止
- ILP32和LP64数据模型
- scss编译输出css并转换成rem
- git 操作的时候总是要输入账号和密码
- Latex WinEdt7.0查找替换功能
- 单片机程序的整体框架设计的一些思路体会
- 例2.2 圆柱体的表面积
- 网页压缩--gzip和deflate的区别
- HL7 2.6解析转XML(C#版)
- jnhs中国的省市县区邮编坐标mysql数据表
- win系统服务器做加速,Win 2003操作系统25招加速大法(转)
- Java学习软件安装详解
- 【R图秀-3】——“全球和平指数”可视化
- 前端:客户端渲染 vs 服务器渲染
- tensorflow 相关书籍推荐