代码雨的实现 linux or html

文章目录

1、linux 代码雨的实现
2、 html 文件实现

1、linux 代码雨的实现

执行
1） sudo apt-get install cmatrix
2）cmatrix

效果：

2、 html 文件实现

1）新建文件
test.html
2) 复制一下代码

<!DOCTYPE html>
<html><head><meta 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或者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;}//颜色也随机变化//ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; //绿色逐渐变浅//ctx.fillStyle = "hsl(123,30%,"+(30-i*2)+"%)"; //绿色随机
//var r= 0;
//var g= parseInt(Math.random()*255) + 3;
//var b= 0;
//ctx.fillStyle = "rgb("+r+','+g+','+b+")"
ctx.fillStyle = code.color;//把代码画出来ctx.fillText(code.text,code.x,code.y);}}requestAnimationFrame(codeRaining);}//创建代码雨createCodeRain();//开始下雨吧 GO>>requestAnimationFrame(codeRaining);</script></body>
</html>

3）双击新建网页文件

效果：

文件参考：
“代码雨”纯HTML源码实现及效果
https://blog.csdn.net/u014597198/article/details/71412881

代码雨的实现 linux or html相关推荐

linux如何安装黑客帝国cmatrix代码雨效果
linux如何安装黑客帝国cmatrix代码雨效果 cmatrix常用命令 cmatrix下载:安装包具体步骤源码安装cmatrix 创建/usr/local/temp目录 mkdir -p /u ...
Linux下的软件安装方式+源码安装软件cmatrix代码雨
Linux下的软件安装方式 1 rpm工具安装 2 yum工具安装 3 源码编译安装软件包类型 1 二进制软件包(=rpm软件包) 无需编译,直接安装根据计算机CPU架构类型和操作系统选择合适的软 ...
代码雨 cmatrix
在centos7安装代码雨cmatrix 首先安装编译环境 yum -y install ncurses* gcc gcc-c++ 其次就是包难找,目前官网已经找不到了,其他地方,比如某某DN是需要花 ...
centos7安装代码雨cmatrix
今天写一个看着好玩的东西!!!代码雨首先安装编译环境 yum -y install ncurses* gcc gcc-c++ 这东西其它好说,就是包比较难找,目前官网已经找不到了,其他地方,比如某某 ...
代码雨代码源复制_超火！黑客帝国代码雨
黑客帝国代码雨相信看过<黑客帝国>的同学,对上面的的这个图片一定不陌生,这是一个非常经典的画面.在繁忙的工作之余,大家也要放松下自己,今天就给大家分享一下代码滚动的实现方法. 第一步,新 ...
将代码从windows移动linux上出现^M错误的解决方法
我将代码从windows移动linux上出现了^M的错误,这种错误的本质是因为要个系统对换行符处理不同.windows是\r\n,而linux上是\n. 我的解决方法: 是使用linux系统自带的do ...
vbs代码炫酷效果_Python|实现黑客帝国代码雨效果
Python|实现黑客帝国代码雨效果估计大家都看过电影<黑客帝国>吧,片中的一段代码雨片段实在是炫酷,试想一下,片中的代码雨效果在自己电脑屏幕上实现了会是一种什么样的感觉,会不会有种身临 ...
《黑客帝国》中的代码雨让人身临其境！利用Python轻松实现！
前言 <黑客帝国>的一段代码雨片段让外行人感觉非常震撼,但其实利用咱们的Python来做出这个效果真的很简单! 今天就带大家把这个代码雨放在自己的显示器上面,亲身体验一把黑客的感觉! 环境 ...
python画代码雨
python实现屏幕代码雨通过Python实现屏幕代码雨 python 版本看不出来是2.x还是3.x的建议百度根据情况调节屏幕大小否则屏幕显示不下会报错 PANEL_width = 1000 ...

代码雨的实现 linux or html

文章目录

1、linux 代码雨的实现

2、 html 文件实现

代码雨的实现 linux or html相关推荐

最新文章

热门文章