theMatrix代码雨效果
2024-09-06 10:15:48
做了一个代码雨效果放在个人主页: 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>
最新文章
- node学习笔记
- 解决:Linux版百度云客户端 BCloud网络错误 问题
- Java简单类——多对多映射
- 《所用到的AJAX技术基础》
- 建立简单的VLAN通信
- linux 下面 opcache 拓展
- 经常会用到的js函数
- ZooKeeper使用命令大全
- Confluence 6 PostgreSQL 创建数据库和数据库用户
- Spring注解 开发
- luoguP4279 [SHOI2008]小约翰的游戏 Anti-SG 博弈论
- 使用explain分析sql语句
- MSP430G2553 模数转换器 ADC10
- Supervisor4.0和python2.7的crit问题,导致python进程阻塞
- Linux高级编程--02.gcc和动态库
- 160509、Java过滤器与SpringMVC拦截器之间的关系与区别
- Python与数据结构[4] ->; 散列表[1] ->; 分离链接法的 Python 实现
- Redis之Hash类型操作
- 03008_ServletContext
- idea获取激活码