HTML实现代码雨源码及效果示例
程序员文章站
2022-05-12 12:38:02
这篇文章主要介绍了HTML实现代码雨源码及效果示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-02-25...
最近学习了html,今天写个html代码雨,然后下面用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 ? 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>
更多代码雨的文章请参考我的其它文章:
“代码雨”js+css+html实现
html代码:
<!doctype html> <html> <head> <meta charset="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="http://www.jq22.com/jquery/jquery-1.10.2.js"></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.settimeout(function() { callback(currtime + timetocall); }, timetocall); lasttime = currtime + timetocall; return id; }; if (!window.cancelanimationframe) window.cancelanimationframe = function(id) { cleartimeout(id); }; }()); // stats var stats = new stats(); stats.setmode(0); stats.domelement.style.position = 'absolute'; stats.domelement.style.left = '0px'; stats.domelement.style.top = '0px'; document.body.appendchild(stats.domelement); var m = { settings: { 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.settings.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 colour m.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 point if (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.settings.col_width, height); if ((m.codes[i][0].position.y - height) < m.height) { m.codes[i][0].position.y += velocity; } else { 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.settings.code_length_params.min, m.settings.code_length_params.max); var codevelocity = (math.random() * (m.settings.velocity_params.max - m.settings.velocity_params.min)) + m.settings.velocity_params.min; var letterslength = m.letters.length; m.codes[column][0].position = { 'x': (column * m.settings.col_width), 'y': 0 }; m.codes[column][0].velocity = codevelocity; m.codes[column][0].strength = m.codes[column][0].velocity / m.settings.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 = settimeout(m.createcode, randominterval); }, createcanvii: function(i) { var codelen = m.codes[i].length - 1; var canvheight = codelen * m.settings.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.settings.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.shadowoffsetx = 0; newctx.shadowoffsety = 0; newctx.shadowblur = 10; newctx.fillstyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')'; } else if (j > (codelen - 4)) { fadestrength = j / codelen; fadestrength = 1 - fadestrength; newctx.shadowoffsetx = 0; newctx.shadowoffsety = 0; newctx.shadowblur = 0; newctx.fillstyle = 'hsla(104, 79%, 74%, ' + (fadestrength + 0.3) + ')'; } else { newctx.shadowoffsetx = 0; newctx.shadowoffsety = 0; newctx.shadowblur = 0; newctx.fillstyle = 'hsla(104, 79%, 74%, ' + strength + ')'; } newctx.filltext(text, 0, (canvheight - (j * m.settings.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 = false; } else { return false; } 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 === 'closed' ? '' : 'closed'; } for (var j = 0; j < 2; j++) { controltoggles[j].addeventlistener('click', togglecontrols, false); } snapshotbtn.addeventlistener('click', m.snapshot, false); } 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('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') 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('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgfontname') format('svg'); } html, body { -webkit-font-smoothing: antialiased; font: normal 12px/14px "carrois gothic", sans-serif; width: 100%; height: 100%; margin: 0; overflow: hidden; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: 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 ease-in-out; -moz-transition: -moz-transform .5s ease-in-out; -o-transition: -o-transform .5s ease-in-out; transition: transform .5s ease-in-out; } #info.closed { -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); } #close { 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代码雨内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
上一篇: Nginx中FastCGI如何配置优化
下一篇: 如何通过nginx负载均衡跳转https