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 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
javascript实现回到顶部特效
May 06 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
基于javascript实现动态时钟效果
Aug 18 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
解决Nuxt使用axios跨域问题
Jul 06 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
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
javascript事件问题
2009/09/05 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python实现电脑自动关机
2018/06/20 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python新手如何理解循环加载模块
2020/05/29 Python
如何将json数据转换为python数据
2020/09/04 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
减负增效提质方案
2014/05/23 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
采购员岗位职责范本
2015/04/07 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js