HTML实现代码⾬源码及效果⽰例最近学习了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;
</style>
</head>
<body>
<canvas id="cvs"></canvas>
<script type="text/javascript">
var cvs = ElementById("cvs");
var ctx = Context("2d");
var cw = cvs.width = document.body.clientWidth;
var ch = cvs.height = document.body.clientHeight;
//动画绘制对象
var requestAnimationFrame = questAnimationFrame || RequestAnimationFrame || 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 = lor;
//把代码画出来
ctx., 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>
<canvas id="canvas"></canvas>
</body>
<script src="www.jq22/jquery/jquery-1.10.2.js"></script>
<script src="neilcarpenter/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 && !questAnimationFrame; ++x) {
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!questAnimationFrame)
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.p = '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 = ElementById('canvas');
< = Context('2d');
M.COLUMNS = il(M.WIDTH / M.settings.COL_WIDTH);
for (var i = 0; i < M.COLUMNS; i++) {
'open': true,
'position': {
'x': 0,
'y': 0
},
'strength': 0
};
}
M.loop();
// not doing this, kills CPU
// M.swapCharacters();
window.cancelAnimationFrame(M.animation);
M.animation = null;
<2.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
for (var i = 0; i < M.COLUMNS; i++) {
// check member of array isn't undefined at this point
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');
if ((M.codes[i][0].position.y - height) < M.HEIGHT) {
} else {
}
}
}
},
createCode: function() {
if (M.codesCounter > M.COLUMNS) {
ateCodeLoop);
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;
'x': (column * M.settings.COL_WIDTH),
'y': 0
};
for (var i = 1; i <= codeLength; i++) {
var newLetter = M.randomFromInterval(0, (lettersLength - 1));
}
jquery源码在线M.codesCounter++;
}
},
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 = ateElement('canvas');
var newCtx = Context('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)));
}
},
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 = ateElement('canvas');
M.linesC.width = M.WIDTH;
M.linesC.height = M.HEIGHT;
M.linesC.style.position = 'absolute';
M.p = 0;
M.linesC.style.left = 0;
M.linesC.style.zIndex = 10;
document.body.appendChild(M.linesC);
var linesYBlack = 0;
var linesYWhite = 0;
<2 = Context('2d');
<2.beginPath();
<2.lineWidth = 1;
<2.strokeStyle = 'rgba(0, 0, 0, 0.7)';
while (linesYBlack < M.HEIGHT) {
<2.moveTo(0, linesYBlack);
<2.lineTo(M.WIDTH, linesYBlack);
linesYBlack += 5;
}
<2.lineWidth = 0.15;
<2.strokeStyle = 'rgba(255, 255, 255, 0.7)';
while (linesYWhite < M.HEIGHT) {
<2.moveTo(0, linesYWhite + 1);
<2.lineTo(M.WIDTH, linesYWhite + 1);
linesYWhite += 5;
}
assignColumn: function() {
var randomColumn = M.randomFromInterval(0, (M.COLUMNS - 1));
if (M.codes[randomColumn][0].open) {
} else {
return false;
}
return randomColumn;
},
randomFromInterval: function(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
},
snapshot: function() {
window.DataURL());
}
};
function eventListenerz() {
var controlToggles = ElementsByClassName('toggle-info');
var controls = ElementById('info');
var snapshotBtn = ElementById('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);
}
M.init();
eventListenerz();
};
css代码：
@import url("leapis/css?family=Carrois+Gothic");
@font-face {
font-family: 'matrix-code';
src: url('neilcarpenter/demos/canvas/matrix/?#iefix') format('embedded-opentype'), url('neilcarpenter/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('neilcarpenter/demos/canvas/matrix/font/mat }
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);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。