HTML实现代码雨源码及效果示例

时间：2021-05-08

最近学习了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); };}());// statsvar 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代码雨内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章