广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~
本篇文章介绍一下如何实现“代码雨”。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
先看看效果
1、绿色：
2、彩色：
3、背景色：
4、绿色逐渐变浅：
源代码：
<!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视频教程】
以上就是教你一招实现“代码雨”的详细内容，更多请关注9543建站博客其它相关文章！
发表评论