DDR爱好者之家 Design By 杰米
我们先看看HTML+JS实现“代码雨”的最终效果
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 "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+JS实现“代码雨”效果源码,更多关于JS特效请查看下面的相关链接
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年03月29日
2024年03月29日
- 苏有朋.1994-珍惜的背包(第3张)【飞碟】【WAV+CUE】
- 《宝可梦:朱紫》“蓝之圆盘”IGN7分:性能优化仍旧灾难
- 《塞尔达传说:王国之泪》大获成功!多项年度数据表现优秀
- 应景!欧任用《塞尔达传说:王国之泪》堆雪人
- 杨采妮.1996-为所欲为(国专)【EMI百代】【WAV+CUE】
- 黎姿.1993-如果真的恋爱【华纳】【WAV+CUE】
- 朱婧汐.2024-VILLAIN反派角色【StreetVoic】【FLAC分轨】
- 《喷射战士3》最新祭典公布 1月13日举办
- NS日服年度下载榜公开:《王泪》不敌《西瓜游戏》
- 科乐美《心跳回忆GS》系列推出复刻版 2月14日登陆NS
- 林峰.2012-SELF-PORTRAIT【英皇娱乐】【WAV+CUE】
- TENSION.2004-Story新歌+精丫EMI百代】【FLAC分轨】
- 草蜢.2000-环球2000超巨星系列【环球】【WAV+CUE】
- 国行Switch开启元旦折扣!《马里奥奥德赛》7折促销
- 《塞尔达》官方账号感谢玩家支持 发布王泪最新壁纸