使用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 相关文章推荐
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
div与span之间的区别与使用介绍
Dec 06 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修正代码
2011/05/09 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Javascript的闭包
2009/12/31 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python作用域用法实例详解
2016/03/15 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
基于python时间处理方法(详解)
2017/08/14 Python
python三引号输出方法
2019/02/27 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
材料成型专业个人求职信范文
2013/09/25 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers