带交互功能的HTML5+JS黑客帝国

简介: 带交互功能的HTML5+JS黑客帝国


<!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>


目录
打赏
0
0
0
0
0
分享
相关文章
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
82 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
118 24
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
587 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
102 2
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
90 5
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
77 4
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
225 1
|
3月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
111 11
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
74 3
|
3月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
35 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等