<!DOCTYPE html> <html> <head> <title>黑客帝国效果</title> </head> <body> <canvas id="canvas"></canvas> <style type="text/css"> body{margin: 0; padding: 0; overflow: hidden;} </style> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.height = window.innerHeight; canvas.width = window.innerWidth; var texts = '0123456789'.split(''); var fontSize = 16; var columns = canvas.width/fontSize; // 用于计算输出文字时坐标，所以长度即为列数 var drops = []; //初始值 for(var x = 0; x < columns; x++){ drops[x] = 1; } function draw(){ //让背景逐渐由透明到不透明 ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); //文字颜色 ctx.fillStyle = '#0F0'; ctx.font = fontSize + 'px arial'; //逐行输出文字 for(var i = 0; i < drops.length; i++){ var text = texts[Math.floor(Math.random()*texts.length)]; ctx.fillText(text, i*fontSize, drops[i]*fontSize); if(drops[i]*fontSize > canvas.height || Math.random() > 0.95){ drops[i] = 0; } drops[i]++; } } setInterval(draw, 33); </script> </body>
带交互功能的HTML5+JS黑客帝国
2023-01-11
144
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
带交互功能的HTML5+JS黑客帝国
目录
相关文章
|
1月前
|
JavaScript
前端开发
|
5天前
|
10天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能，界面简洁实用，是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
18
2
2
|
26天前
|
人工智能
JavaScript
网络安全
ToB项目身份认证AD集成（三完）：利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互，包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类，提供了与 AD 服务器通信的完整解决方案，同时解决了中文字段在 LDAP 操作中被转义的问题。
24
1
1
|
1月前
|
JavaScript
前端开发
API
|
1月前
|
JavaScript
API
UED
|
1月前
|
资源调度
JavaScript
UED
|
1月前
|
JavaScript
搜索推荐
|
1月前
|
存储
移动开发
UED
HTML5 的 form 的自动完成功能
在HTML5中，`<form>`元素具备自动完成功能，可根据用户历史输入提供建议，提高输入效率并改善体验。默认情况下，浏览器会自动开启此功能，也可通过设置`autocomplete`属性为`on`或`off`来明确开启或关闭。对于特定表单字段，如`<input>`，同样可以通过设置`autocomplete`属性控制自动完成行为。浏览器通过记录并存储用户的历史输入，在用户再次访问相同表单时提供相应的自动完成建议。
62
1
1
|
2月前
|
存储
移动开发
API
热门文章
最新文章
1
weex-html5 组件进阶
2
使用shell抽取html数据之二
3
html5 开发android
4
过滤代码中的html标签
5
HTML DOM 教程Part1
6
HTML页面 加载播放RTMP协议流和HLS协议流直播视频
7
HTML基础加强
8
@Html.ValidationSummary()作用
9
HTML元素 属性 格式化标签
10
再来 10 个新鲜的 HTML5 教程
1
前端框架与库 - Vue.js基础：模板语法、数据绑定
133
2
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
260
3
js【详解】arr.reduce() 数组缩减
45
4
【vue】 vue2 | js 实现数字滚动效果
98
5
【vue】 网站动态背景 | vanta.js的使用
408
6
JavaScript进阶-JavaScript库与框架简介
57
7
DVWA JavaScript 通关解析
66
8
WEB三大主流框架之Vue.js
44
9
断网之后的页面，Autox.js是点击还是上下滑动比较好？
60
10
autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
215