<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>黑客帝国文字下落</title>

  <style>

  html, body {margin:0; padding:0; background-color:#000;}

   </style>

  <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

 </head>

 <body>

 <canvas id="matrix" height="943" width="1920"></canvas>

    <script type="text/javascript">

    //文字

    var txts = "0123456789!@#$%^&*()~_+℃☆○※";

    //转为数组

    txts = txts.split("");

    var matrix=document.getElementById("matrix");

    var context=matrix.getContext("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;

    function drawMatrix(){

        context.fillStyle="rgba(0, 0, 0, 0.09)";

        context.fillRect(0,0,matrix.width,matrix.height);

        context.fillStyle="green";

        context.font=font_size+"px";

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

            //随机取要输出的文字

            var text = txts[Math.floor(Math.random()*txts.length)];

            //输出文字，注意坐标的计算

            context.fillText(text,i*font_size,drop[i]*font_size);/*get 0 and 1*/

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

                drop[i]=0;

            drop[i]++;

        }

    }

    setInterval(drawMatrix,33);

</script>

 </body>

</html>

js仿黑客帝国文字数字雨效果的更多相关文章

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

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

  2. js实现黑客帝国文字下落效果

    突然想到这个效果便想实现以下. 当然免不了要百度一下,于是查找到 http://www.cnblogs.com/myvin/p/4775152.html这篇文章, 效果可以查看博文中的给出的效果图.那 ...

  3. iType.js仿输入文字效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Jquery仿彩票更换数字动画效果

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script> ...

  5. js仿京东轮播图效果

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. canvas+gif.js打造自己的数字雨头像

    前言 昨天 是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像

  7. JS — 实现简单的数字时钟

    js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  8. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  9. 黑客帝国雨效果JS

    黑客帝国雨效果JS. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. vscode visual studio code svn 小乌龟 快捷键设置

    首先要安装svn小乌龟 然后安装vs code的svn插件TortoiseSVN for VS Code 文件->首选项->键盘快捷方式->搜索svn->找到相应命令然后设置快 ...

  2. 那些移动端web踩过的坑

    原文链接:https://geniuspeng.github.io/2017/08/24/mobile-issues/ 扔了N久,还是捡回来了.好好弄一下吧.刚工作的时候挺忙的,后来不那么忙了,但是变 ...

  3. swift学习第八天：元组

    元组的介绍 元组是Swift中特有的,OC中并没有相关类型 它是什么呢? 它是一种数据结构,在数学中应用广泛 类似于数组或者字典 可以用于定义一组数据 组成元组类型的数据可以称为“元素” 元组的定义 ...

  4. html5+js压缩图片上传

    最近在折腾移动站的开发,涉及到了一个手机里面上传图片.于是经过N久的折腾,找到一个插件,用法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  5. [React Unit Testing] React unit testing demo

    import React from 'react' const Release = React.createClass({ render() { const { title, artist, outO ...

  6. C语言数据类型取值范围解析

    版权声明:本文为博主原创文章,未经博主允许不得转载.   为什么int类型的取值范围会是-2^31 ~ 2^31-1  ,为什么要减一呢? 计算机里规定,8位二进制为一个字节,拿byte来说,一个BY ...

  7. Django之文章归档

    1.任务描述:将博文按照时间月份归档 2.源代码: views.py def getPage(request, article_list): paginator = Paginator(article ...

  8. 【14.06%】【hdu 5904】LCIS

    Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...

  9. POJ - 2236Wireless Network-并查集

    id=11125" target="_blank" style="color:blue; text-decoration:none">POJ - ...

  10. 利用PS把多张psd格式的图片转换为一张PDF格式

    最近为公司做了一版电子样册,所有图片都是包含多图层高清晰的psd格式,要做成一个PDF文件的电子样册,发给客户看,面对这些零散的图片,本来打算利用在线合成:在线网址 https://smallpdf. ...