theMatrix代码雨效果
做了一个代码雨效果放在个人主页: 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>
theMatrix代码雨效果的更多相关文章
- JQuery实现——黑客帝国代码雨效果
效果如你所见就是本页面上方那样的效果 实现方法来自一个印度小伙纸,学习完我也没总结一下,今儿个补上 如何实现,大家右键查看源码复制即可,不过学习的过程还是要总结总结. 下面通过另外两个小例子,一步一步 ...
- JAVA实现黑客帝国代码雨效果
import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j ...
- Canvas修行之黑客帝国代码雨
既然是修行,不卖弄关子,不吊胃口,修行成果必须先晒一晒. 下图是我用canvas画的黑客帝国代码雨,想起当年看黑客帝国时,那个代码雨场景让我心旷神怡,大开脑洞,满脑子是那种三维空间,无数0和1像雨一样 ...
- 使用CodeMirror在浏览器中实现编辑器的代码高亮效果
使用CodeMirror在浏览器中实现编辑器的代码高亮效果 在网站后台管理中希望能够对网站的样式表css与js文件以及模板html进行管理,在编辑的时候只是以普通文本展示又太普通,显得好难看,于是便在 ...
- 代码雨 html实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- css3 圣诞红包雨效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 黑客帝国雨效果JS
黑客帝国雨效果JS. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 有一段<script>代码,效果是点击<p>就会弹出信息,但是有的<p>点击会有效果,有的没有效果
问题:有一段<script>代码,效果是点击<p>就会弹出信息,但是有的<p>点击会有效果,有的没有效果 解决: 页面代码是至上而下执行的,如果你的这个标签在< ...
- <前端 js 实现 代码雨 >
前端 js 实现 代码雨: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- oracle之bitmap索引
oracle常见的索引是BTree索引和Bitmap索引. BTree索引特点: 默认索引 适合大量增删改查 不能用or操作符 适合高基数的列(即唯一值多) 创建sql:create index li ...
- oauth2.0协议接口-第一篇-api逻辑
开放平台是支持OAuth2.0和RESTful协议的资源分享平台,经过授权的合作伙伴可以读取和写入资讯.用户.文件.数据库等资源. 1.创建数据库表结构 CMSSyncClient(数据同步客户端) ...
- HAN模型理解2
Hierarchical Attention Networks for Document Classification 论文的理解 在论文的摘要中,它提出了论文的两个特点.第一个就是对应文章所有具有的 ...
- POJ:2785-4 Values whose Sum is 0(双向搜索)
4 Values whose Sum is 0 Time Limit: 15000MS Memory Limit: 228000K Total Submissions: 26974 Accepted: ...
- python QQ邮件发送邮件
# -*- coding: UTF-8 -*- import smtplib from email.mime.text import MIMEText from email.header import ...
- Hadoop环境搭建 (伪分布式搭建)
一,Hadoop版本下载 建议下载:Hadoop2.5.0 (虽然是老版本,但是在企业级别中运用非常稳定,新版本虽然添加了些小功能但是版本稳定性有带与考核) 1.下载地址: hadoop.apache ...
- Java实现系统目录实时监听更新。
SDK1.7新增的nio WatchService能完美解决这个问题.美中不足是如果部署在window系统下会出现莫名其妙的文件夹占用异常导致子目录监听失效,linux下则完美运行.这个问题着实让人头 ...
- 9.2python操作redis
Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...
- erlang中的原子(atom)内部实现[转]
转自: http://www.kongqingquan.com/archives/208#more-208 Erlang中的atom由通用hash表实现,虚拟机中atom最终的用数值表示,对应表中的下 ...
- 从事IT业一个8年老兵转行前的自我总结1——初爻
现在,本人已离开这个呆了8年的软件行业了.回想自己从半路出家,从实施开始做起,最终在一家外企做项目经理PM结束了自己的软件职业生涯.从一张白纸的自学开始,做过项目实施,客户培训,拿过需求,开发,架构设 ...