使用canvas实现黑客帝国数字雨效果


Posted in HTML / CSS onJanuary 02, 2020

使用canvas实现黑客帝国数字雨

效果图:

使用canvas实现黑客帝国数字雨效果

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas style="background:#111"></canvas>

    <script>
      //获取画布对象
      var can = document.querySelector("canvas");
      //获取画布的上下文
      var ctx = can.getContext("2d");
      //设置canvas的宽度和高度
      can.width = window.innerWidth;
      can.height = window.innerHeight;
      //每个文字的字体大小
      var fontSize = 16;
      //计算列
      var colunms = Math.floor(window.innerWidth / fontSize);
      //记录每列文字的y轴坐标
      var arr = [];
      //给每一个文字初始化一个起始点的位置
      for (var i = 0; i < colunms; i++) {
        arr.push(0);
      }
      //运动的文字
      var str = "you are a silly";
      //绘画的函数
      function draw() {
        //布满全屏的黑色遮罩层
        ctx.fillStyle = "rgba(0,0,0,0.05)";
        ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
        //给字体设置样式
        ctx.font = "700 " + fontSize + "px  微软雅黑";
        //给字体添加颜色
        ctx.fillStyle = "#00cc33";
        //写入画布中
        for (var i = 0; i < colunms; i++) {
          var index = Math.floor(Math.random() * str.length);
          var x = i * fontSize;
          var y = arr[i] * fontSize;
          ctx.fillText(str[index], x, y);
          //如果文字的Y轴坐标大于画布的高度,1/100*colunms概率将该文字的Y轴坐标重置为0
          if (y >= can.height && Math.random() > 0.99) {
            arr[i] = 0;
          }
    //文字Y轴坐标+1
          arr[i]++;
        }
      }
      draw();
      setInterval(draw, 30);
    </script>
  </body>
</html>

总结

以上所述是小编给大家介绍的使用canvas实现黑客帝国数字雨效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 #HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 #HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 #HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 #HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 #HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 #HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 #HTML / CSS
You might like
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
python 实现归并排序算法
2012/06/05 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
酒店总经理助理岗位职责
2014/02/01 职场文书
总结表彰大会主持词
2014/03/26 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
贫困证明怎么写
2015/06/16 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL
Nginx跨域问题解析与解决
2022/08/05 Servers
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL