黑客帝国雨效果JS。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    *{margin: 0;padding: 0;}

    body{overflow: hidden;}

    canvas{background: #111;}

    </style>

</head>

<body>

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

    <script>

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

        var context = canvas.getContext("2d");

        var W = window.innerWidth;

        var H = window.innerHeight;

        canvas.width = W;

        canvas.height = H;

        var fontSize = 16;

        //计算列

        var colunm = Math.floor(W/fontSize);

        //console.log(colunm);

        //存储Y值

        var drops = [];

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

            drops[i] = 1;

        }

        //console.log(...drops)

        var str = "Welcome JavaScript";

        //let tempRandom = Math.random()*str.length;

        //console.log(tempRandom,Math.floor(tempRandom))

        //把文字画到屏幕上

        function draw(){

            context.fillStyle = "rgba(0,0,0,0.05)";//文字随机出现的背景

            context.fillRect( 0, 0, W, H);

            context.font = "700 " + fontSize + "px ARIAL";

            context.fillStyle = "#00cc33";

            //context.fillStyle = randColor();

            //console.log("你好");

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

                //让字符串中的内容随机出现

                var index = Math.floor(Math.random()*str.length);

                var x = i*fontSize;

                var y = drops[i]*fontSize;

                context.fillText(str[index],x,y);

                console.log(str[index],x,y);

                if(y>=canvas.height && Math.random()>0.99){

                    drops[i] = 0;

                }

            drops[i]++;

            }

        }

        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>

效果截图：

黑客帝国雨效果JS的更多相关文章

  1. theMatrix代码雨效果

    做了一个代码雨效果放在个人主页:  https://lanleilin.github.io/lanGallery/index.html 代码: <!DOCTYPE html> <ht ...

  2. 页面常见效果js实现

    2015.12.2 页面常见效果js实现 [有没有觉得很坑,[笑哭,邮箱写上]] 复习: Js内置对象: 1.浏览器对象 window document history location event  ...

  3. css3 圣诞红包雨效果

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

  4. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

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

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

  6. JQuery实现——黑客帝国代码雨效果

    效果如你所见就是本页面上方那样的效果 实现方法来自一个印度小伙纸,学习完我也没总结一下,今儿个补上 如何实现,大家右键查看源码复制即可,不过学习的过程还是要总结总结. 下面通过另外两个小例子,一步一步 ...

  7. JAVA实现黑客帝国代码雨效果

    import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import j ...

  8. 三种比较好玩的黑客效果JS代码（摘取）

    <html> <head> <title>The Matrix</title> <script src="http://ajax.goo ...

  9. 最牛的打字效果JS插件 typing.js

    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...

随机推荐

  1. Hadoop守护进程的作用（转）

    概述: <ignore_js_op> Hadoop是一个能够对大量数据进行分布式处理的软件框架,实现了Google的MapReduce编程模型和框架,能够把应用程序分割成许多的 小的工作单 ...

  2. 【NOIP2018pj】题解

    [NOIP2018pj]题解 \(T1\) 题面 洛谷 题解 好像并没有什么好说的... #include <iostream> #include <cstdio> #incl ...

  3. （一）SpringBoot2.0基础篇- 介绍及HelloWorld初体验

    1.SpringBoot介绍: 根据官方SpringBoot文档描述,BUILD ANYTHING WITH SPRING BOOT (用SPRING BOOT构建任何东西,很牛X呀!),下面是官方文 ...

  4. 【MYSQL用户创建报错】ERROR 1396 (HY000): Operation CREATE USER failed for 'user1'@'%'

    原文参考自:http://blog.csdn.net/u011575570/article/details/51438841 1.创建用户的时候报错ERROR 1396 (HY000): Operat ...

  5. 六、Django之Template

    一.Template由来 1.任何前端页面的改动都和后端有关: 2.前端HTML和后端python分开能让网站更加清晰: 3.前后端分离的趋势下,专业的事交给专业的人做. 二.Django中的temp ...

  6. 微软office web apps 服务器搭建之在线文档预览（二）

    上一篇文章已经介绍了整个安装过程了.只要在浏览器中输入文档转换server的ip,会自动跳转,出现如下页面. 那么就可以实现本地文档预览了,你可以试试.(注意:是本地哦,路径不要写错,类似“\\fil ...

  7. MES与ERP的区别（转）

    MES和ERP有很大的不同,主要体现在以下几个方面: 1.管理的目标不同 ERP的重点在于财务,也就是从财务的角度出发来对企业的资源进行计划,相关的模块也是以财务为核心的展开,最终的管理数据也是集中到 ...

  8. vue Map 渲染DOM

    遍历对象(map),以键值对k:v的形式渲染DOM (1)DOM (2)数据模板

  9. Spring学习（3）：Spring架构（转载）

    1. Spring架构图 核心容器:包括Core.Beans.Context.EL模块. ●Core模块:封装了框架依赖的最底层部分,包括资源访问.类型转换及一些常用工具类. ●Beans模块:提供了 ...

  10. 袋鼠云研发手记 | 数栈·开源：Github上400+Star的硬核分布式同步工具FlinkX

    作为一家创新驱动的科技公司,袋鼠云每年研发投入达数千万,公司80%员工都是技术人员,袋鼠云产品家族包括企业级一站式数据中台PaaS数栈.交互式数据可视化大屏开发平台Easy[V]等产品也在迅速迭代.在 ...