最近学习了html，今天写个html代码雨，然后下面用html和js也写了一个，给自己留点笔记
先看看效果
1、绿色：
2、彩色：
3、背景色：
4、绿色逐渐变浅：
源代码：
<!doctype html><html> <head> <meta http-equiv="content-type" content="text/html;chart=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 = parint(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 bapos = parint(math.random(舞蹈活动策划方案) * 300); //随机速度 3~13之间 var speed = parint(math.random() * 10) + 3; //每组的x轴位置随机产生 var colx = parint(math.random() * cw) //绿色随机 var rgbr = 0; var rgbg = parint(math.random() * 255); var rgbb = 0; //ctx.fillstyle = "rgb("+r+','+g+','+b+")" for (var i = 0; i < parint(ch / step) / 2; i++) { var code = { x: colx, y: -(step * i) - bapos, speed: speed, // text : parint(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"][parint(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; } el { //匀速降落 code.y += code.speed; } //1 颜色也随机变化 //ctx.fillstyle = "hsl("+(parint(math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; //2 绿色逐渐变浅 // ctx.fillstyle = "hsl(123,80%,"+(30-i*2)+"%)"; //3 绿色随机 // var r= 0; // var g= parint(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>更多代码雨的文章请参考我的其它文章：
“代码雨”js+css+html实现
html代码：
<!doctype html><html><head><meta chart="utf-8"><link rel="stylesheet" type="text/css" href="css/ok.css"><title>code by-zhenyu.sha</title></head> <body><canvas id="canvas"></canvas></body><script src="/d/file/titlepic/script><script src="http://neilcarpenter.com/demos/canvas/matrix/stats.min.js"></script><script type="text/javascript" src="js/ok.js"></script></html>
js代码：
(function() {var lasttime = 0;var vendors = ['ms', 'moz', 'webkit', 'o'];for (var x = 0; x < vendors.length && !window.requestanimationframe; ++x) {window.requestanimationframe = window[vendors[x] + 'requestanimationframe'];window.cancelanimationframe = window[vendors[x] + 'cancelanimationframe'] ||window[vendors[x] + 'cancelrequestanimationframe'];}if (!window.requestanimationframe)window.requestanimationframe = function(callback, element) {var currtime = new date().gettime();var timetocall = math.max(0, 16 - (currtime - lasttime));var id = window.ttimeout(function() {callback(currtime + timetocall);},timetocall);lasttime = currtime + timetocall;return id;};if (!window.cancelanimationframe)window.cancelanimationframe = function(id) {cleartimeout(id);};}());// statsvar stats = new stats();stats.tmode(0);stats.domelement.style.position = 'absolute';stats.domelement.style.left = '0px';stats.domelement.style.top = '0px';document.body.appendchild(stats.domelement);var m = {ttings: {col_width: 20,col_height: 25,velocity_params: {min: 4,max: 8},code_length_params: {min: 20,max: 40}},animation: null,c: null,ctx: null,linec: null,ctx2: null,width: window.innerwidth,height: window.innerheight,columns: null,canvii: [],font: '30px matrix-code',letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'],codes: [],createcodeloop: null,codescounter: 0,init: function() {m.c = document.getelementbyid('canvas');m.ctx = m.c.getcontext('2d');m.c.width = m.width;m.c.height = m.height;m.ctx.shadowblur = 0;m.ctx.fillstyle = '#000';m.ctx.fillrect(0, 0, m.width, m.height);m.ctx.font = m.font;m.columns = math.ceil(m.width / m.ttings.col_width);for (var i = 0; i < m.columns; i++) {m.codes[i] = [];m.codes[i][0] = {'open': true,'position': {'x': 0,'y': 0},'strength': 0};}m.loop();m.createlines();m.createcode();// not doing this, kills cpu// m.swapcharacters();window.onresize = function() {window.cancelanimationframe(m.animation);m.animation = null;m.ctx.clearrect(0, 0, m.width, m.height);m.codescounter = 0;m.ctx2.clearrect(0, 0, m.width, m.height);m.width = window.innerwidth;m.height = window.innerheight;m.init();};},loop: function() {m.animation = requestanimationframe(function() {m.loop();});m.draw();stats.update();},draw: function() {var velocity, height, x, y, c, ctx;// slow fade bg colourm.ctx.shadowcolor = 'rgba(0, 0, 0, 0.5)';m.ctx.fillstyle = 'rgba(0, 0, 0, 0.5)';m.ctx.fillrect(0, 0, m.width, m.height);m.ctx.globalcompositeoperation = 'source-over';for (var i = 0; i < m.columns; i++) {// check member of array isn't undefined at this pointif (m.codes[i][0].canvas) {velocity = m.codes[i][0].velocity;height = m.codes[i][0].canvas.height;x = m.codes[i][0].position.x;y = m.codes[i][0].position.y - height;c = m.codes[i][0].canvas;ctx = c.getcontext('2d');m.ctx.drawimage(c, x, y, m.ttings.col_width, height);if ((m.codes[i][0].position.y - height) < m.height) {m.codes[i][0].position.y += velocity;} el {m.codes[i][0].position.y = 0;}}}},createcode: function() {if (m.codescounter > m.columns) {cleartimeout(m.createcodeloop);return;}var randominterval = m.randomfrominterval(0, 100);var column = m.assigncolumn();if (column) {var codelength = m.randomfrominterval(m.ttings.code_length_para大陆女明星ms.min, m.ttings.code_length_params.max);var codevelocity = (math.random() * (m.ttings.velocity_params.max - m.ttings.velocity_params.min)) + m.ttings.velocity_params.min;var letterslength = m.letters.length;m.codes[column][0].position = {'x': (column * m.ttings.col_width),'y': 0};m.codes[column][0].velocity = codevelocity;m.codes[column][0].strength = m.codes[column][0].velocity / m.ttings.velocity_params.max;for (var i = 1; i <= codelength; i++) {var newletter = m.randomfrominterval(0, (letterslength - 1));m.codes[column][i] = m.letters[newletter];}m.createcanvii(column);m.codescounter++;}m.createcodeloop = ttimeout(m.createcode, randominterval);},createcanvii: 电脑温度多少算正常function(i) {var codelen = m.codes[i].length - 1;var canvheight = codelen * m.ttings.col_height;var velocity = m.codes[i][0].velocity;var strength = m.codes[i][0].strength;var text, fadestrength;var newcanv = document.createelement('canvas');var newctx = newcanv.getcontext('2d');newcanv.width = m.ttings.col_width;newcanv.height = canvheight;for (var j = 1; j < codelen; j++) {text = m.codes[i][j];newctx.globalcompositeoperation = 'source-over';newctx.font = '30px matrix-code';if (j < 5) {newctx.shadowcolor = 'hsl(104, 79%, 74%)';newctx.shadowofftx = 0;newctx.shadowoffty = 0;newctx.shadowblur = 10;newctx.fillstyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';} el if (j > (codelen - 4)) {fadestrength = j / codelen;fadestrength = 1 - fadestrength;newctx.shadowofftx = 0;newctx.shadowoffty = 0;newctx.shadowblur = 0;newctx.fillstyle = 'hsla(1回忆鲁迅先生04, 79%, 74%, ' + (fadestrength + 0.3) + ')';} el {newctx.shadowofftx = 0;newctx.shadowoffty = 0;newctx.shadowblur = 0;newctx.fillstyle = 'hsla(104, 79%, 74%, ' + strength + ')';}newctx.filltext(text, 0, (canvheight - (j * m.ttings.col_height)));}m.codes[i][0].canvas = newcanv;},swapcharacters: function() {var randomcodeindex;var randomcode;var randomcodelen;var randomcharindex;var newrandomcharindex;var newrandomchar;for (var i = 0; i < 20; i++) {randomcodeindex = m.randomfrominterval(0, (m.codes.length - 1));randomcode = m.codes[randomcodeindex];randomcodelen = randomcode.length;randomcharindex = m.randomfrominterval(2, (randomcodelen - 1));newrandomcharindex = m.randomfrominterval(0, (m.letters.length - 1));newrandomchar = m.letters[newrandomcharindex];randomcode[randomcharindex] = newrandomchar;}m.swapcharacters();},createlines: function() {m.linesc = document.createelement('canvas');m.linesc.width = m.width;m.linesc.height = m.height;m.linesc.style.position = 'absolute';m.linesc.style.top = 0;m.linesc.style.left = 0;m.linesc.style.zindex = 10;document.body.appendchild(m.linesc);var linesyblack = 0;var linesywhite = 0;m.ctx2 = m.linesc.getcontext('2d');m.ctx2.beginpath();m.ctx2.linewidth = 1;m.ctx2.strokestyle = 'rgba(0, 0, 0, 0.7)';while (linesyblack < m.height) {m.ctx2.moveto(0, linesyblack);m.ctx2.lineto(m.width, linesyblack);linesyblack += 5;}m.ctx2.linewidth = 0.15;m.ctx2.strokestyle = 'rgba(255, 255, 255, 0.7)';while (linesywhite < m.height) {m.ctx2.moveto(0, linesywhite + 1);m.ctx2.lineto(m.width, linesywhite + 1);linesywhite += 5;}m.ctx2.stroke();},assigncolumn: function() {var randomcolumn = m.randomfrominterval(0, (m.columns - 1));if (m.codes[randomcolumn][0].open) {m.codes[randomcolumn][0].open = fal;} el {return fal;}return randomcolumn;},randomfrominterval: function(from, to) {return math.floor(math.random() * (to - from + 1) + from);},snapshot: function() {window.open(m.c.todataurl());}};function eventlistenerz() {var controltoggles = document.getelementsbyclassname('toggle-info');var controls = document.getelementbyid('info');var snapshotbtn = document.getelementbyid('snapshot');function togglecontrols(e) {e.preventdefault();controls.classname = controls.classname === 'clod' ? '' : 'clod';}for (var j = 0; j < 2; j++) {controltoggles[j].addeventlistener('click', togglecontrols, fal);}snapshotbtn.addeventlistener('click', m.snapshot, fal);}window.onload = function() {m.init();eventlistenerz();};css代码：
@import url("http://fonts.googleapis.com/css?family=carrois+gothic");@font-face {font-family: 'matrix-code';src: url('/d/file/titlepic/matrix-code.eot format('embedded-opentype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('/d/file/titlepic/matrix-code.svg format('svg');}html,body {-webkit-font-smoothing: antialiad;font: normal 12px/14px "carrois gothic", sans-rif;width: 100%;height: 100%;margin: 0;overflow: hidden;color: #fff;-webkit-ur-lect: none;-moz-ur-lect: none;-ms-ur-lect: none;ur-lect: none;}body {background: black;}#stats {z-index: 100;}#info {background: rgba(0, 0, 0, 0.7);position: fixed;bottom: 0;left: 0px;width: 250px;padding: 10px 20px 20px;z-index: 100;-webkit-transform-origin: bottom center;-moz-transform-origin: bottom center;-o-transform-origin: bottom center;transform-origin: bottom center;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: -webkit-transform .5s ea-in-out;-moz-transition: -moz-transform .5s ea-in-out;-o-transition: -o-transform .5s ea-in-out;transition: transform .5s ea-in-out;}#info.clod {-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}.toggle-info {position: absolute;display: block;height: 10px;background: rgba(0, 0, 0, 0.8);width: 290px;left: 0;text-align: center;padding: 3px 0 7px;text-decoration: none;color: white;text-shadow: none;}.toggle-info:hover {background: rgb(0, 0, 0);}#clo {top: -20px;}#open {bottom: -20px;-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);-o-transform: rotate(-180deg);transform: rotate(-180deg);}button {background: rgba(255, 255, 255, 0.2);color: #fff;border: 0;border-radius: 2px;padding: 7px 10px;box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.3);cursor: pointer;}button:hover {background: rgba(255, 255, 255, 0.1);}pa {color: #fff;}pa:hover {color: #effdeb;text-shadow: 0px 0px 5px #75ad61;}到此这篇关于html实现代码雨源码及效果示例的文章就介绍到这了,更多相关html代码雨内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-07 11:12:07，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/37ca6987f8e3eacffdf68f0b73c9c2b4.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML实现代码雨源码及效果示例.doc
本文 PDF 下载地址：HTML实现代码雨源码及效果示例.pdf
| 留言与评论（共有 0 条评论） |
