使用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 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
css3中的calc函数浅析
Jul 10 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
js格式化时间的方法
2015/12/18 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Python作用域用法实例详解
2016/03/15 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
python实现批量注册网站用户的示例
2019/02/22 Python
详解python读取image
2019/04/03 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
工程业务员工作职责
2013/12/07 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
社区中秋节活动方案
2014/01/29 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏