使用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 相关文章推荐
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
Jun 25 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
web前端之css水平居中代码解析
May 20 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
layui实现数据分页功能
2019/07/27 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python入门教程之运算符与控制流
2016/08/17 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python路径的写法及目录的获取方式
2019/12/26 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
竞职演讲稿范文
2014/01/11 职场文书
简历自我评价模版
2014/01/31 职场文书
信息技术课后反思
2014/04/27 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
维稳工作情况汇报
2014/10/27 职场文书
贷款担保书
2015/01/20 职场文书
开会通知短信大全
2015/04/20 职场文书
新闻稿标题
2015/07/18 职场文书
企业团队精神心得体会
2016/01/19 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python