明天就回家过年了，今天没什么心思上班，看了下博客，发现一个黑客帝国额js版本，地址：https://blog.csdn.net/zhongyi_yang/article/details/53841805

　　然后做了一点封装，这里也贴出来分享一下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="zh-cn">
  4.     <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  5.  
  6.     <title>简单的黑客帝国效果</title>
  7. </head>
  8.  
  9. <body style="height:2000px">
  10.     <script type="text/javascript">
  11.         (function (window) {
  12.             var hackerCache = {};
  13.  
  14.             //默认配置
  15.             function makeCfg(cfg) {
  16.                 cfg = cfg || {};
  17.                 var _cfg = {
  18.                     canvas: "hacker_matrix" + ((Math.random() * 10000) >> 0),
  19.                     height: window.innerHeight,
  20.                     width: window.innerWidth,
  21.                     fontSize: 16,
  22.                     fontColor: "#0F0",
  23.                     fontSyle: "16px arial",
  24.                     seeds: "0123456789abcdefghijklmnopqrstuvwxyz",
  25.                     fillStyle: 'rgba(0, 0, 0, 0.05)',//这里只能是rgba格式,好像用ctx.globalAlpha也能做透明度
  26.                     breaks: 0.98
  27.                 };
  28.                 for (var key in _cfg) {
  29.                     _cfg[key] = cfg[key] || _cfg[key];
  30.                 }
  31.  
  32.                 return _cfg;
  33.             }
  34.  
  35.             function hacker(cfg) {
  36.                 cfg = makeCfg(cfg);
  37.  
  38.                 var canvas = document.getElementById(cfg.canvas);
  39.                 //高度及初始化
  40.                 var altitudes = [], ctx, texts = cfg.seeds.split('');
  41.  
  42.                 if (!canvas) {
  43.                     canvas = document.createElement("canvas");
  44.                     canvas.id = cfg.canvas;
  45.                     canvas.height = cfg.height;
  46.                     canvas.width = cfg.width;
  47.                     document.body.appendChild(canvas);
  48.                 }
  49.  
  50.                 var cache = hackerCache[canvas.id];
  51.                 if (!cache) {
  52.                     ctx = canvas.getContext('2d');
  53.  
  54.                     var columns = canvas.width / cfg.fontSize;
  55.                     for (var i = 0; i < columns; i++) {
  56.                         altitudes[i] = 1;
  57.                     }
  58.                     hackerCache[canvas.id] = {
  59.                         context: ctx,
  60.                         altitudes: altitudes,
  61.                         interval: undefined
  62.                     }
  63.  
  64.                     cache = hackerCache[canvas.id];
  65.                 }
  66.  
  67.                 altitudes = cache.altitudes;
  68.                 ctx = cache.context;
  69.  
  70.                 //逐行输出
  71.                 function drawLine() {
  72.                     ctx.fillStyle = cfg.fillStyle;
  73.                     ctx.fillRect(0, 0, canvas.width, canvas.height);
  74.  
  75.                     //文字颜色
  76.                     ctx.fillStyle = cfg.fontColor;
  77.                     ctx.font = cfg.fontSyle;
  78.  
  79.                     for (var i = 0; i < altitudes.length; i++) {
  80.                         var altitude = altitudes[i];
  81.                         var y = altitude * cfg.fontSize;
  82.  
  83.                         var text = texts[Math.floor(Math.random() * texts.length)];
  84.                         ctx.fillText(text, i * cfg.fontSize, y);
  85.  
  86.                         if (y > canvas.height && Math.random() > cfg.breaks) {
  87.                             altitude = 0;
  88.                         }
  89.  
  90.                         altitudes[i] = ++altitude;
  91.                     }
  92.                 }
  93.  
  94.                 this.start = function () {
  95.                     if (cache.interval === undefined) {
  96.                         cache.interval = setInterval(function () {
  97.                             drawLine();
  98.                         }, 33);
  99.                     }
  100.                 };
  101.                 this.stop = function () {
  102.                     cache.interval = cache.interval && clearInterval(cache.interval);
  103.                 }
  104.             }
  105.  
  106.             window.hacker = hacker;
  107.         })(window);
  108.  
  109.         window.onload = function () {
  110.             //new hacker().start();
  111.             new hacker({ canvas: "canvas1" }).start();
  112.             new hacker({ canvas: "canvas2" }).start();
  113.             new hacker({ canvas: "canvas3" }).start();
  114.             new hacker({ canvas: "canvas4" }).start();
  115.         }
  116.     </script>
  117.     <canvas id="canvas1" width="400" height="400"></canvas>
  118.     <canvas id="canvas2" width="400" height="400"></canvas>
  119.     <canvas id="canvas3" width="400" height="400"></canvas>
  120.     <canvas id="canvas4" width="400" height="400"></canvas>
  121. </body>
  122. </html>

黑客帝国纯js版的更多相关文章

  1. jQuery下实现等待指定元素加载完毕(可改成纯js版)

    http://www.poluoluo.com/jzxy/201307/233374.html 代码如下: jQuery.fn.wait = function (func, times, interv ...

  2. 纯JS文本在线HTML编辑器KindEditor

    KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...

  3. Ajax，纯Js+Jquery

    AJAX:Asynchronous Javascript and xml 异步,Js和Xml 交互式网页开发 不刷新页面,与服务器交互 详情请参照Jquery工具指南用在浏览器端的技术,无刷新,通过X ...

  4. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. javascript日历控件——纯javascript版

    平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. < ...

  6. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  7. Twitter面试题蓄水池蓄水量算法(原创 JS版，以后可能会补上C#的)

    之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...

  8. 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  9. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

随机推荐

  1. Why is the size of an empty class not zero in C++?

    Predict the output of the following program? 1 #include<iostream> 2 using namespace std; 3 4 c ...

  2. 【Linux】【Services】【Package】rpm

    CentOS系统上rpm命令管理程序包:         安装.升级.卸载.查询和校验.数据库维护                   rpm命令:rpm  [OPTIONS]  [PACKAGE_F ...

  3. 基于阿里云ecs（centos 7） 安装jenkins

    1. 安装好 jdk 2. 官网(https://pkg.jenkins.io/redhat-stable/)下载rpm包(稳定版): wget https://pkg.jenkins.io/redh ...

  4. new Date（）与setDate（）参数

    New Date()与setDate()参数 相信网上已经有很多关于日期的文章了,这里只是我自己再工作中遇到的问题然后加以总结: new Date() new Date() 一共有六种形式,五种带参数 ...

  5. 创建线程的第二种方式------实现Runnable接口的方式

    package cn.itcast.demo16.Demo07.Runnable;/** * @author newcityman * @date 2019/7/22 - 23:17 */public ...

  6. Nginx配置重定向

    目录 一.简介 二.配置 访问a页面重定向到b页面 访问当前nginx,重定向到其他网址 一.简介 据相关变量重定向和选择不同的配置,从一个 location 跳转到另一个 location,不过这样 ...

  7. 内存泄漏避雷！你真的了解重写equals()和hashcode()方法的原因吗?

    基本概念 要比较两个对象是否相等时需要调用对象的equals() 方法: 判断对象引用所指向的对象地址是否相等 对象地址相等时, 那么对象相关的数据也相等,包括: 对象句柄 对象头 对象实例数据 对象 ...

  8. CF675A Infinite Sequence 题解

    Content 给定三个整数 \(a,b,c\),问你 \(b\) 是否在以 \(a\) 为首项,公差为 \(c\) 的等差数列中. 数据范围:\(-10^9\leqslant a,b,c\leqsl ...

  9. listitems.ListItemCollectionPosition属性为空

    SPListItemCollection listitems = list1.GetItems(query);//当执行完上面的代码后,listitems.ListItemCollectionPosi ...

  10. IDEA把Main方法打包成jar包

    创建一个maven项目 写一个main方法 Module:选择main方法所在的模块,我这里只有一个模块 所以默认选中 Main Class:选择main方法所在的类 Directory for ME ...