首页 >> 综合精选 >
教你一招实现“代码雨”
跟大家讲解下有关教你一招实现“代码雨”,相信小伙伴们对这个话题应该也很关注吧,现在就为小伙伴们说说教你一招实现“代码雨”,小编也收集到了有关教你一招实现“代码雨”的相关资料,希望大家看到了会喜欢。
本篇文章介绍一下如何实现“代码雨”。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
先看看效果
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视频教程】
以上就是教你一招实现“代码雨”的详细内容,更多请关注php中文网其它相关文章!
来源:php中文网
免责声明:本文由用户上传,与本网站立场无关。财经信息仅供读者参考,并不构成投资建议。投资者据此操作,风险自担。 如有侵权请联系删除!
分享:
最新文章
-
作为A股市场中极具代表性的黄金珠宝行业龙头企业,作为中国历史最悠久的珠宝品牌之一,老凤祥(股票代码:600612)...浏览全文>>
-
宝子们,杭州 房子装修完成啦!这次要给大家分享几家设计超赞的装修公司哦。它们各具特色,从空间规划到风格...浏览全文>>
-
欲筑室者,先治其基。在上海,装修房子对于每个业主而言,都是极为关键的一步,然而,如何挑选一家值得信赖的...浏览全文>>
-
2025年以来,联通支付严格贯彻落实国家战略部署,以数字和科技为驱动,做好金融五篇大文章,履行支付为民社会...浏览全文>>
-
良工巧匠,方能筑就华居;精雕细琢,方可打造美家。当我们谈论装修公司时,选择一家靠谱可靠的公司是至关重要...浏览全文>>
-
在当今社会,随着城市化进程的高速推进,建筑垃圾的产生量与日俱增。据权威数据显示,我国每年建筑垃圾产生量超 ...浏览全文>>
-
家人们,在上海要装修,选对公司那可太重要了!古语有云:"安得广厦千万间,大庇天下寒士俱欢颜。"一个温馨的...浏览全文>>
-
近年来,新能源汽车市场发展迅猛,各大品牌纷纷推出各具特色的车型以满足消费者多样化的需求。作为国内新能源...浏览全文>>
-
近年来,随着汽车市场的不断变化和消费者需求的升级,安徽滁州地区的宝来2025新款车型在市场上引起了广泛关注...浏览全文>>
-
随着汽车市场的不断变化,滁州地区的消费者对高尔夫车型的关注度持续上升。作为大众品牌旗下的经典车型,高尔...浏览全文>>
大家爱看
频道推荐
站长推荐
- 安徽滁州途安L新车报价2022款,最低售价16.68万起,入手正当时
- 小鹏G7试驾,新手必知的详细步骤
- 别克GL8预约试驾,4S店的贴心服务与流程
- 安徽阜阳ID.4 CROZZ落地价全解,买车必看的省钱秘籍
- 淮北探岳多少钱 2025款落地价,最低售价17.69万起现在该入手吗?
- 安徽淮南大众CC新款价格2025款多少钱能落地?
- 淮北长安启源C798价格,最低售价12.98万起现在该入手吗?
- 安徽淮南途锐价格,各配置车型售价全解析
- 蒙迪欧试驾预约,4S店体验全攻略
- 沃尔沃XC40试驾需要注意什么
- 滁州ID.4 X新车报价2025款,各车型售价大公开,性价比爆棚
- 试驾思域,快速操作,轻松体验驾驶乐趣
- 试驾长安CS35PLUS,一键搞定,开启豪华驾驶之旅
- 天津滨海ID.6 X落地价限时特惠,最低售价25.9888万起,错过不再有
- 天津滨海凌渡多少钱?看完这篇购车攻略再做决定
- 安徽池州长安猎手K50落地价,买车前的全方位指南
- 山东济南ID.6 CROZZ 2024新款价格,最低售价19.59万起,现车充足
- 试驾海狮05EV,新手必知的详细步骤
- 生活家PHEV多少钱 2025款落地价走势,近一个月最低售价63.98万起,性价比凸显
- 奇瑞风云A9试驾,新手必知的详细步骤