做了一个代码雨效果放在个人主页: https://lanleilin.github.io/lanGallery/index.html
代码：
<!DOCTYPE html>
<html>
<head>
<title>The Matrix</title>
<script type="text/javascript" src="../js/jquery.min.js">
</script>
<meta charset="utf-8">
<script>
$(document).ready(function() {
//判断移动端还是PC端
function isPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for(var v = 0; v < Agents.length; v++) {
if(userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
if(!isPC()) {
// 手机
var s = window.screen;
console.log(s);
var width = s.width * 2.5;
q.width = s.width * 2.5;
q.Height = 300;
var height = q.height;
var yPositions = Array(300).join(0).split(‘‘);
var ctx = q.getContext(‘2d‘);
var draw = function() {
ctx.fillStyle = ‘rgba(0,0,0,.05)‘; //反复生成opacity为0.5的半透明黑色背景
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = ‘lightgreen‘;
ctx.font = ‘3rem Georgia‘;
yPositions.map(function(y, index) {
text = String.fromCharCode(1e2 + Math.random() * 33); //随机生成字母
x = (index * 30) + 10; //x距离
q.getContext(‘2d‘).fillText(text, x, y); //在指定位置显示一个字母
if(y > Math.random() * 1e4) {
yPositions[index] = 0;
} else {
yPositions[index] = y + 20; //确定显示字母的位置
}
});
};
RunMatrix();
function RunMatrix() {
Game_Interval = setInterval(draw, 50); //设定刷新间隔
}
} else {
var s = window.screen;
// var q=$(‘#q‘);
console.log(typeof($("#q")));
console.log(document.getElementById("q"));
var width = q.width = s.width;
var height = q.height;
var yPositions = Array(300).join(0).split(‘‘);
var ctx = q.getContext(‘2d‘);
var draw = function() {
ctx.fillStyle = ‘rgba(0,0,0,.05)‘;
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = ‘red‘;
ctx.font = ‘10pt Georgia‘;
yPositions.map(function(y, index) {
text = String.fromCharCode(1e2 + Math.random() * 33);
x = (index * 10) + 10; //x距离
q.getContext(‘2d‘).fillText(text, x, y);
if(y > Math.random() * 1e4) {
yPositions[index] = 0;
} else {
yPositions[index] = y + 10;
}
});
};
RunMatrix();
function RunMatrix() {
Game_Interval = setInterval(draw, 50);
}
}
isPC();
});
</script>
</head>
<body>
<div align="center">
<h1 id="theMatrix">The matrix</h1>
<canvas id="q" width="500" height="500"></canvas>
</div>
</body>
</html>
时间： 2024-11-10 07:08:45