<!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
135
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
带交互功能的HTML5+JS黑客帝国
目录
相关文章
|
1月前
|
前端开发
JavaScript
|
2天前
|
存储
移动开发
API
|
3天前
|
移动开发
前端开发
JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数，如获取和操作子网元的方法，以及组（Group）的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中，并通过toChildren函数获取满足特定条件的图元。
13
0
0
|
2天前
|
前端开发
|
1月前
|
JavaScript
前端开发
开发者
|
1月前
|
JavaScript
安全
前端开发
|
28天前
|
开发者
Android开发
iOS开发
Xamarin开发者的神器！揭秘你绝不能错过的插件和工具，让你的开发效率飞跃式提升
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架，让开发者通过单一共享代码库构建跨平台移动应用，支持 iOS、Android 和 Windows。使用 C# 和 XAML，它简化了多平台开发流程，保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用介绍 Xamarin.Forms 的基本功能和工作原理。首先配置 Visual Studio 开发环境，然后创建并运行一个包含标题、按钮和消息标签的示例应用，展示如何定义界面布局及处理按钮点击事件。这帮助开发者快速入门 Xamarin.Forms，提高跨平台应用开发效率。
32
0
0
|
29天前
|
JavaScript
前端开发
开发者
Vue.js的未来已来：掌握最新功能，驾驭前端开发的新浪潮！
【8月更文挑战第30天】Vue.js作为前端开发领域的明星框架，凭借其轻量级、响应式及组件化特性，深受全球开发者喜爱。它持续进化，引入新功能并优化性能，如提升渲染速度和减小打包体积，增强TypeScript支持，简化组件编写流程，进一步提升应用响应性和加载速度，改善开发者体验。活跃的社区和丰富的开源项目如“vuejs-challenges”推动其不断发展。未来，Vue.js将探索更多新特性，如宏和非虚拟DOM模式，巩固其在现代前端框架中的领先地位。
43
0
0
|
30天前
|
JavaScript
前端开发
Next js：点击登录显示登录表单，点击注册显示注册表单的功能
本文提供了一个Next.js中使用React状态管理实现点击按钮切换显示登录和注册表单的功能示例，包括创建`authform.tsx`组件和在页面组件中引入使用的方法。
57
0
0
|
1月前
|
JavaScript
索引
热门文章
最新文章
1
weex-html5 组件进阶
2
HDU ACM 1088 Write a simple HTML Browser
3
一步步用HTML5动手写个图片上传预览组件
4
WebGL实现HTML5的3D贪吃蛇游戏
5
HTML5中类jQuery选择器querySelector的使用
6
iReport4.5.1、Struts2.2.3生成Html文档时页面红叉叉的解决办法。
7
微软证实IE的HTML渲染引擎中存在0day漏洞
8
WinForms C#：html编辑器工程源码，含直接写WebBrowser的文件流、IPersistStreamInit接口的声明和一些相关的小方法
9
使用Kotlin做一个简单的HTML构造器
10
@html.ActionLink的几种参数格式
1
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同？
64
2
Vue.js 中父组件调用子组件的方法
103
3
Vue.js 中子组件向父组件传值的方法
56
4
使用JavaScript和XLSX.js将数据导出为Excel文件
313
5
AngularJS是一款由Google收购的JavaScript结构框架
57
6
JavaScript 关键字
48
7
【Web 前端】什么是JS变量提升？
108
8
<body> 中的JavaScript函数
33
9
<head> 中的JavaScript 函数
32
10
【JavaScript 与 TypeScript 技术专栏】JavaScript 与 TypeScript 的未来发展趋势
139