通过html+css+JavaScript编写代码雨

最新推荐文章于 2024-09-23 09:45:00 发布

吱呜猪猪猪~

最新推荐文章于 2024-09-23 09:45:00 发布

阅读量182

点赞数

原文链接：https://blog.csdn.net/qq_44731019/article/details/109551217

版权

<!DOCTYPE html>

<html>

<head>

html, body {

width: 100%;

height: 100%;

}

body {

background: #000;

overflow: hidden;

margin: 0;

padding: 0;

}

</style>

</head>

<body>

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: ["好","好","学","习","天","天","向","上"][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>

吱呜猪猪猪~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫