当前位置：移动技术网 > IT编程>开发语言>JavaScript > JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

2020年06月23日 | 移动技术网IT编程 | 我要评论

先看看js+css+html实现“代码雨”类似黑客帝国文字下落最终效果：

html代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofollow" >
<title>code by-zhenyu.sha</title>
</head>
 
<body>
<canvas id="canvas"></canvas>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://neilcarpenter.com/demos/canvas/matrix/stats.min.js"></script>
<script type="text/javascript" src="js/ok.js"></script>
</html>

js代码：

(function() {
  var lasttime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for (var x = 0; x < vendors.length && !window.requestanimationframe; ++x) {
    window.requestanimationframe = window[vendors[x] + 'requestanimationframe'];
    window.cancelanimationframe = window[vendors[x] + 'cancelanimationframe'] ||
      window[vendors[x] + 'cancelrequestanimationframe'];
  }
  if (!window.requestanimationframe)
    window.requestanimationframe = function(callback, element) {
      var currtime = new date().gettime();
      var timetocall = math.max(0, 16 - (currtime - lasttime));
      var id = window.settimeout(function() {
          callback(currtime + timetocall);
        },
        timetocall);
      lasttime = currtime + timetocall;
      return id;
    };
  if (!window.cancelanimationframe)
    window.cancelanimationframe = function(id) {
      cleartimeout(id);
    };
}());
// stats
var stats = new stats();
stats.setmode(0);
stats.domelement.style.position = 'absolute';
stats.domelement.style.left = '0px';
stats.domelement.style.top = '0px';
document.body.appendchild(stats.domelement);
var m = {
  settings: {
    col_width: 20,
    col_height: 25,
    velocity_params: {
      min: 4,
      max: 8
    },
    code_length_params: {
      min: 20,
      max: 40
    }
  },
  animation: null,
  c: null,
  ctx: null,
  linec: null,
  ctx2: null,
  width: window.innerwidth,
  height: window.innerheight,
  columns: null,
  canvii: [],
  font: '30px matrix-code',
  letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'],
  codes: [],
  createcodeloop: null,
  codescounter: 0,
  init: function() {
    m.c = document.getelementbyid('canvas');
    m.ctx = m.c.getcontext('2d');
    m.c.width = m.width;
    m.c.height = m.height;
    m.ctx.shadowblur = 0;
    m.ctx.fillstyle = '#000';
    m.ctx.fillrect(0, 0, m.width, m.height);
    m.ctx.font = m.font;
    m.columns = math.ceil(m.width / m.settings.col_width);
    for (var i = 0; i < m.columns; i++) {
      m.codes[i] = [];
      m.codes[i][0] = {
        'open': true,
        'position': {
          'x': 0,
          'y': 0
        },
        'strength': 0
      };
    }
    m.loop();
    m.createlines();
    m.createcode();
    // not doing this, kills cpu
    // m.swapcharacters();
    window.onresize = function() {
      window.cancelanimationframe(m.animation);
      m.animation = null;
      m.ctx.clearrect(0, 0, m.width, m.height);
      m.codescounter = 0;
      m.ctx2.clearrect(0, 0, m.width, m.height);
      m.width = window.innerwidth;
      m.height = window.innerheight;
      m.init();
    };
  },
  loop: function() {
    m.animation = requestanimationframe(function() {
      m.loop();
    });
    m.draw();
    stats.update();
  },
  draw: function() {
    var velocity, height, x, y, c, ctx;
    // slow fade bg colour
    m.ctx.shadowcolor = 'rgba(0, 0, 0, 0.5)';
    m.ctx.fillstyle = 'rgba(0, 0, 0, 0.5)';
    m.ctx.fillrect(0, 0, m.width, m.height);
    m.ctx.globalcompositeoperation = 'source-over';
    for (var i = 0; i < m.columns; i++) {
      // check member of array isn't undefined at this point
      if (m.codes[i][0].canvas) {
        velocity = m.codes[i][0].velocity;
        height = m.codes[i][0].canvas.height;
        x = m.codes[i][0].position.x;
        y = m.codes[i][0].position.y - height;
        c = m.codes[i][0].canvas;
        ctx = c.getcontext('2d');
        m.ctx.drawimage(c, x, y, m.settings.col_width, height);
        if ((m.codes[i][0].position.y - height) < m.height) {
          m.codes[i][0].position.y += velocity;
        } else {
          m.codes[i][0].position.y = 0;
        }
      }
    }
  },
  createcode: function() {
    if (m.codescounter > m.columns) {
      cleartimeout(m.createcodeloop);
      return;
    }
    var randominterval = m.randomfrominterval(0, 100);
    var column = m.assigncolumn();
    if (column) {
      var codelength = m.randomfrominterval(m.settings.code_length_params.min, m.settings.code_length_params.max);
      var codevelocity = (math.random() * (m.settings.velocity_params.max - m.settings.velocity_params.min)) + m.settings.velocity_params.min;
      var letterslength = m.letters.length;
      m.codes[column][0].position = {
        'x': (column * m.settings.col_width),
        'y': 0
      };
      m.codes[column][0].velocity = codevelocity;
      m.codes[column][0].strength = m.codes[column][0].velocity / m.settings.velocity_params.max;
      for (var i = 1; i <= codelength; i++) {
        var newletter = m.randomfrominterval(0, (letterslength - 1));
        m.codes[column][i] = m.letters[newletter];
      }
      m.createcanvii(column);
      m.codescounter++;
    }
    m.createcodeloop = settimeout(m.createcode, randominterval);
  },
  createcanvii: function(i) {
    var codelen = m.codes[i].length - 1;
    var canvheight = codelen * m.settings.col_height;
    var velocity = m.codes[i][0].velocity;
    var strength = m.codes[i][0].strength;
    var text, fadestrength;
    var newcanv = document.createelement('canvas');
    var newctx = newcanv.getcontext('2d');
    newcanv.width = m.settings.col_width;
    newcanv.height = canvheight;
    for (var j = 1; j < codelen; j++) {
      text = m.codes[i][j];
      newctx.globalcompositeoperation = 'source-over';
      newctx.font = '30px matrix-code';
      if (j < 5) {
        newctx.shadowcolor = 'hsl(104, 79%, 74%)';
        newctx.shadowoffsetx = 0;
        newctx.shadowoffsety = 0;
        newctx.shadowblur = 10;
        newctx.fillstyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';
      } else if (j > (codelen - 4)) {
        fadestrength = j / codelen;
        fadestrength = 1 - fadestrength;
        newctx.shadowoffsetx = 0;
        newctx.shadowoffsety = 0;
        newctx.shadowblur = 0;
        newctx.fillstyle = 'hsla(104, 79%, 74%, ' + (fadestrength + 0.3) + ')';
      } else {
        newctx.shadowoffsetx = 0;
        newctx.shadowoffsety = 0;
        newctx.shadowblur = 0;
        newctx.fillstyle = 'hsla(104, 79%, 74%, ' + strength + ')';
      }
      newctx.filltext(text, 0, (canvheight - (j * m.settings.col_height)));
    }
    m.codes[i][0].canvas = newcanv;
  },
  swapcharacters: function() {
    var randomcodeindex;
    var randomcode;
    var randomcodelen;
    var randomcharindex;
    var newrandomcharindex;
    var newrandomchar;
    for (var i = 0; i < 20; i++) {
      randomcodeindex = m.randomfrominterval(0, (m.codes.length - 1));
      randomcode = m.codes[randomcodeindex];
      randomcodelen = randomcode.length;
      randomcharindex = m.randomfrominterval(2, (randomcodelen - 1));
      newrandomcharindex = m.randomfrominterval(0, (m.letters.length - 1));
      newrandomchar = m.letters[newrandomcharindex];
      randomcode[randomcharindex] = newrandomchar;
    }
    m.swapcharacters();
  },
  createlines: function() {
    m.linesc = document.createelement('canvas');
    m.linesc.width = m.width;
    m.linesc.height = m.height;
    m.linesc.style.position = 'absolute';
    m.linesc.style.top = 0;
    m.linesc.style.left = 0;
    m.linesc.style.zindex = 10;
    document.body.appendchild(m.linesc);
    var linesyblack = 0;
    var linesywhite = 0;
    m.ctx2 = m.linesc.getcontext('2d');
    m.ctx2.beginpath();
    m.ctx2.linewidth = 1;
    m.ctx2.strokestyle = 'rgba(0, 0, 0, 0.7)';
    while (linesyblack < m.height) {
      m.ctx2.moveto(0, linesyblack);
      m.ctx2.lineto(m.width, linesyblack);
      linesyblack += 5;
    }
    m.ctx2.linewidth = 0.15;
    m.ctx2.strokestyle = 'rgba(255, 255, 255, 0.7)';
    while (linesywhite < m.height) {
      m.ctx2.moveto(0, linesywhite + 1);
      m.ctx2.lineto(m.width, linesywhite + 1);
      linesywhite += 5;
    }
    m.ctx2.stroke();
  },
  assigncolumn: function() {
    var randomcolumn = m.randomfrominterval(0, (m.columns - 1));
    if (m.codes[randomcolumn][0].open) {
      m.codes[randomcolumn][0].open = false;
    } else {
      return false;
    }
    return randomcolumn;
  },
  randomfrominterval: function(from, to) {
    return math.floor(math.random() * (to - from + 1) + from);
  },
  snapshot: function() {
    window.open(m.c.todataurl());
  }
};
function eventlistenerz() {
  var controltoggles = document.getelementsbyclassname('toggle-info');
  var controls = document.getelementbyid('info');
  var snapshotbtn = document.getelementbyid('snapshot');
  function togglecontrols(e) {
    e.preventdefault();
    controls.classname = controls.classname === 'closed' ? '' : 'closed';
  }
  for (var j = 0; j < 2; j++) {
    controltoggles[j].addeventlistener('click', togglecontrols, false);
  }
  snapshotbtn.addeventlistener('click', m.snapshot, false);
}
window.onload = function() {
  m.init();
  eventlistenerz();
};

css代码：

@import url("http://fonts.googleapis.com/css?family=carrois+gothic");
@font-face {
  font-family: 'matrix-code';
  src: url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgfontname') format('svg');
}
html,
body {
  -webkit-font-smoothing: antialiased;
  font: normal 12px/14px "carrois gothic", sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
  background: black;
}
#stats {
  z-index: 100;
}
#info {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  bottom: 0;
  left: 0px;
  width: 250px;
  padding: 10px 20px 20px;
  z-index: 100;
  -webkit-transform-origin: bottom center;
  -moz-transform-origin: bottom center;
  -o-transform-origin: bottom center;
  transform-origin: bottom center;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: -webkit-transform .5s ease-in-out;
  -moz-transition: -moz-transform .5s ease-in-out;
  -o-transition: -o-transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
}
#info.closed {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.toggle-info {
  position: absolute;
  display: block;
  height: 10px;
  background: rgba(0, 0, 0, 0.8);
  width: 290px;
  left: 0;
  text-align: center;
  padding: 3px 0 7px;
  text-decoration: none;
  color: white;
  text-shadow: none;
}
.toggle-info:hover {
  background: rgb(0, 0, 0);
}
#close {
  top: -20px;
}
#open {
  bottom: -20px;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
button {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 7px 10px;
  box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
button:hover {
  background: rgba(255, 255, 255, 0.1);
}
pa {
  color: #fff;
}
pa:hover {
  color: #effdeb;
  text-shadow: 0px 0px 5px #75ad61;
}

本文介绍了使用js+css+html实现“代码雨”类似黑客帝国文字下落效果的代码实例，更多js特效请查看下面的相关链接

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS--常见面试题整理(附答案）

一.JS面试题1.当a=?时，可以让a同时满足a1,a2,a==3,并输出ok方法一let a=[1,2,3];... [阅读全文]
javascript的短路机制和几种数值取整的方法

1. javascript的短路机制1.1 且运算符（&&）往往用于多个表达式的求值。它的运算规... [阅读全文]
jQuery50个选择器,让你得心应手

jQuery一:概念一个简单的js组件(是一个别人写好的js文件不是jar包)引入jQuery文件<scr... [阅读全文]
JavaScript 好题汇总分享（持续更新，看到好题就写）

前言本文搜集的题目，均来自各大网课、面试题等预编译相关1a = 100;function demo(e) {fu... [阅读全文]
JS中的原型与原型链图解

原型每一个构造器（函数）上面都有一个属性叫prototype，称为原型。它的值是一个对象，这个对象我们称为原型对... [阅读全文]
XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级FormDataFormData 为序列化表单以及创建与表单格式相同的数据（... [阅读全文]
XMLHttpRequest对象

AJAX简介AJAX = 异步 JavaScript 和 XML；是一种用于创建快速动态网页的技术。通过在... [阅读全文]
mock入门学习

mockjs入门学习,自动生成数据官网入口：http://mockjs.com/安装：npm i mockjs ... [阅读全文]
使用递归原生实现拷贝&&最简单的方法实现深拷贝

<script> // 第一种:最简单的方法,一行代码实现 JSON.p... [阅读全文]
【剑指 Offer 45】把数组排成最小的数

输入一个非负整数数组，把数组里所有数字拼接起来排成一个数，打印能拼接出的所有数字中最小的一个。示例 1:输入: ... [阅读全文]

网友评论


验证码：

JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

2020年06月23日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论