JS画布动态实现黑客帝国背景效果


Posted in Javascript onNovember 08, 2020

本文实例为大家分享了JS画布动态实现黑客帝国背景效果的具体代码,供大家参考,具体内容如下

效果图

JS画布动态实现黑客帝国背景效果

完整代码

<!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>
    *{
      padding:0;
      margin:0;
    }
    body{
      overflow: hidden;
    }
  </style>
</head>
<body>
    <canvas id="mom" style="background:#111"></canvas>
  <script>
   window.onload = function(){
    //获取画布对象
    var canvas = document.getElementById("mom");
    //获取画布的上下文
    //getContext() 方法返回一个用于在画布上绘图的环境。
    var context =canvas.getContext("2d");
    //获取浏览器屏幕的宽度和高度
    var W = window.innerWidth;
    var H = window.innerHeight;
    //设置canvas的宽度和高度
    canvas.width = W;
    canvas.height = H;
    //每个文字的字体大小
    var fontSize = 16;
    //计算列
    var colunms = Math.floor(W /fontSize);
    //记录每列文字的y轴坐标
    var drops = [];
    //给每一个文字初始化一个起始点的位置
    //计算每一个文字所谓坐标 存储y轴的坐标 
    for(var i=0;i<colunms;i++){
      drops.push(0);
    }
    //运动的文字
    var str ="JavaScript function(){}";
    //4:fillText(str,x,y);原理就是去更改y的坐标位置
    //绘画的函数
    function draw(){
      context.fillStyle = "rgba(0,0,0,0.05)";
      //fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。
      context.fillRect(0,0,W,H);
      //给字体设置样式
      context.font = "700 "+fontSize+"px 微软雅黑";
      //给字体添加颜色
      context.fillStyle ="#00cc33";//可以rgb,hsl, 标准色,十六进制颜色
      //写入画布中
      for(var i=0;i<colunms;i++){
        var index = Math.floor(Math.random() * str.length);//设置文字出发时间随机 Math.floor(Math.random()*str.length)让数组里面的文字索引随机出现 
        var x = i*fontSize;
        var y = drops[i] *fontSize;//也让y轴方向也向下掉一个文字的距离
        context.fillText(str[index],x,y);
        // //如果要改变时间,肯定就是改变每次他的起点
        if(y >= canvas.height && Math.random()>0.99){
          drops[i] = 0;
        }
        drops[i]++;//让数组里面的值每次加一,用于上面的y轴下掉 
      }
    };
    //随机颜色
    function randColor(){
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb("+r+","+g+","+b+")";
    }
    draw();
    setInterval(draw,20);
  };
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 #Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 #Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 #Javascript
解决Vue watch里调用方法的坑
Nov 07 #Javascript
浅谈vue.watch的触发条件是什么
Nov 07 #Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 #Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 #Javascript
You might like
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
document.documentElement的一些使用技巧
2013/04/18 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python让列表倒序输出的实例
2018/06/25 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Django中的AutoField字段使用
2020/05/18 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
实习教师自我鉴定
2013/12/09 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
军训心得体会
2013/12/31 职场文书
人力资源求职信
2014/05/25 职场文书
作风建设剖析材料
2014/10/06 职场文书
党员三严三实心得体会
2014/10/13 职场文书
解决redis sentinel 频繁主备切换的问题
2021/04/12 Redis