文章目录
- 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或者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;
}
//颜色也随机变化
//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源码实现及效果