突然想到这个效果便想实现以下。

当然免不了要百度一下,于是查找到 http://www.cnblogs.com/myvin/p/4775152.html这篇文章， 效果可以查看博文中的给出的效果图。那么我们直接分析代码吧

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>The Matrix for Practice</title>

    <style type="text/css">

    *{margin: 0 auto;padding: 0 auto;}

    body{background: black;overflow: hidden;}

    h1{text-align: center;color: green;text-transform: uppercase;}

    </style>

</head>

<body>

    <h1>the matrix</h1>

    <canvas id="matrix"></canvas>

    <script type="text/javascript">

    var matrix=document.getElementById("matrix"); //标签

      var context=matrix.getContext("2d");    //设置为2d

    matrix.height=window.innerHeight; //高度和宽度

    matrix.width=window.innerWidth;

      var drop=[];

      var font_size=16;

      var columns=matrix.width/font_size; //计算所能承载最大的列数

      for(var i=0;i<columns;i++)

          drop[i]=1+Math.random()*10;

      function drawMatrix(){ //绘制

      //

    context.fillStyle="rgba(0, 0, 0, 0.1)";   //黑色背景，透明度为0.9

      context.fillRect(0,0,matrix.width,matrix.height);  //绘制黑色半透明层

    //绘制数据层

      context.fillStyle="green";

      //context.font=font_size+"px";

      for(var i=0;i<columns;i++){

          context.fillText(Math.floor(Math.random()*2),i*font_size,drop[i]*font_size);/*get 0 and 1 绘制到指定的（x，y） 点  */ 

          if(drop[i]*font_size>(matrix.height*1/3)&&Math.random()>0.95)/*reset*/

              drop[i]=0;

          drop[i]++;

      }

  }

 var  cet= setInterval(drawMatrix,40)

   setTimeout(function(){  clearInterval(cet); },3000);

</script>

</body>

</html>

哈哈哈，直接将作者代码搬过来了，好了废话不多说直奔主题。

我这里贴出的代码是改善过的

if(drop[i]*font_size>(matrix.height*1/3)&&Math.random()>0.95)/*reset*/

这段代码原作者用的是2/3  但是实际效果第一次出现时候，一个整版面感觉像隔断了意向，而且需要“移动”到2/3处后才会错乱开来，感觉不够“神奇”于是稍加改动，当然，这样做并没有什么卵用，只是让整齐的版面时间减少了。

　　drop[i]=1+Math.random()*10;

这句代码也是我改后的，原作者设置的是固的值。没有后边的Math.random()*10 这导致了开场要绘制所有的数据在同一行，还是那句话，看起来不够“神秘”，为了快速的进入“神秘”场景于是，略加改动。

下图是改动后的效果：

当然这整体看起来感觉还是很平淡呀。于是继续进行改造

 

js实现黑客帝国文字下落效果的更多相关文章

  1. JS 黑客帝国文字下落效果

    黑客帝国文字下落效果 源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

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

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <l ...

  3. js仿黑客帝国文字数字雨效果

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

  4. HTML5 Canvas实现黑客帝国文字掉落效果

    效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> ...

  5. 【Azure Developer】App Service + PubSub +JS 实现多人版黑客帝国文字流效果图

    需要描述 1)实现黑客帝国文字流效果图,JS功能 2)部署在云中,让大家都可以访问,App Service实现 3)大家都能发送消息,并显示在文字流中,PubSub(websocket)实现 终极效果 ...

  6. 使用Three.js实现神奇的3D文字悬浮效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...

  7. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  8. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  9. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

随机推荐

  1. Microsoft Graph Web应用程序极致开发体验

    作者:陈希章 重写于 2017年5月24日 前言 这篇文章最早写于2017年5月2日,当时的想法是从最简单的方式来写如何在一个ASP.NET MVC应用程序中集成Microsoft Graph,但实际 ...

  2. 【ASP.NET MVC】MVC概述

    描述 本篇文章主要概述ASP.NET MVC,具体包括如下内容: 1.MVC模式概述 2.WebForm概述 3.WebForm与MVC区别 4.ASP.NET MVC发展历程 5.运用程序结构 6. ...

  3. 自学Zabbix3.8.2-可视化Visualisation-maps网络地图

    自学Zabbix3.8.2-可视化Visualisation-maps网络地图 可以简单的理解为动态网络拓扑图,可以针对业务来配置zabbix map,通过map可以了解应用的整体状况:服务器是否异常 ...

  4. 源生js惯性滚动与回弹效果

    在写移动端的APP或者页面时,经常会遇到惯性滚动与回弹效果.用插件iscroll可以轻松解决这个问题,大多数的移动框架也能轻松解决这个问题,它们内部都封装了这个效果. 一直好奇这个效果原生JS是怎么实 ...

  5. java宜立方商城项目

    宜立方商城项目 链接: https://pan.baidu.com/s/1c1SokzI 密码: z5cy 网上买的,资源是拿来共享,而不是来牟利的 框架:spring      设计模式      ...

  6. CS:APP3e 深入理解计算机系统_3e Attacklab 实验

    详细的题目要求和资源可以到 http://csapp.cs.cmu.edu/3e/labs.html 或者 http://www.cs.cmu.edu/~./213/schedule.html 获取. ...

  7. [转]addEventListener() 方法，事件监听

    转载  白杨-M  http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...

  8. 《深入浅出Netty》【PDF】下载

    <深入浅出Netty>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062563 内容简介 本文档主要讲述的是深入浅出Netty: ...

  9. MVC系列——一个异常消息传递引发的思考

    前言:最近在某个项目里面遇到一个有点纠结的小问题,经过半天时间的思索和尝试,问题得到解决.在此记录一下解决的过程,以及解决问题的过程中对.net里面MVC异常处理的思考.都是些老生常谈的问题,不多说, ...

  10. Kotlin——最详细的常量、变量、注释的使用

    在Kotlin中的变量.常量以及注释多多少少和Java语言是有着不同之处的.不管是变量.常量的定义方式,还是注释的使用.下面详细的介绍Kotlin中的变量.常量.注释的使用.以及和Java的对比. 如 ...