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>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
