前端  js 实现 代码雨：

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="UTF-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <meta http-equiv="X-UA-Compatible" content="ie=edge" />

     <title>Document</title>

     <style>

       * {

         padding: 0;

         margin: 0;

       }

       body {

         overflow: hidden;

       }

     </style>

   </head>

   <body>

     <canvas

       id="mom"

       style="background-image: linear-gradient(red,green,yellow)"

     ></canvas>

     <script>

       //获取画布对象

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

       //获取画布的上下文

       //getContext() 方法返回一个用于在画布上绘图的环境。

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

       //获取浏览器屏幕的宽度和高度

       var W = window.innerWidth;

       var H = window.innerHeight;

       //设置canvas的宽度和高度

       canvas.width = W;

       canvas.height = H;

       //每个文字的字体大小

       var fontSize = 16;

       //计算列

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

       //记录每列文字的y轴坐标

       var drops = [];

       //给每一个文字初始化一个起始点的位置

       //计算每一个文字所谓坐标 存储y轴的坐标

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

         drops[i] = 1;

       }

       //运动的文字JavaScript function(){}

       var str = "hxx";

       //4:fillText(str,x,y);原理就是去更改y的坐标位置

       //绘画的函数

       function draw() {

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

         //fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

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

         //给字体设置样式

         context.font = "700 " + fontSize + "px  微软雅黑";

         //给字体添加颜色

         context.fillStyle = "#00cc33"; //可以rgb,hsl, 标准色，十六进制颜色

         //写入画布中

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

           var index = Math.floor(Math.random() * str.length); 
           //设置文字出发时间随机 Math.floor(Math.random()*str.length)让数组里面的文字索引随机出现

           var x = i * fontSize;

           var y = drops[i] * fontSize; //也让y轴方向也向下掉一个文字的距离

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

           // //如果要改变时间，肯定就是改变每次他的起点

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

             drops[i] = 0;

           }

           drops[i]++; //让数组里面的值每次加一，用于上面的y轴下掉

         }

       }

       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. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. 剑指Offer之二进制中1的个数

    题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示.     解法1:使用Integer.toBinanryString()返回int变量的二进制表示的字符串. [在Intege ...

  2. 【译】OWIN: Open Web Server Interface for .NET

    主要是使用 OAuth 时,它运行在 OWIN 上,然后又出了若干问题,总之,发现对 IIS.ASP.NET 和 OWIN 理解一塌糊涂. 后面看到 OWIN: Open Web Server Int ...

  3. [安卓基础] 008.Android中的显示单位

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  4. win上的python

    #启用浏览器,最大化窗口 #coding = utf-8 from selenium import webdriver class MyClass(object): ''' classdocs ''' ...

  5. TCP 半连接队列和全连接队列满了会发生什么？又该如何应对？

    前言 网上许多博客针对增大 TCP 半连接队列和全连接队列的方式如下: 增大 TCP 半连接队列的方式是增大 /proc/sys/net/ipv4/tcp_max_syn_backlog: 增大 TC ...

  6. Black Hat Python之#2：TCP代理

    在本科做毕设的时候就接触到TCP代理这东西,当时需要使用代理来对发送和收到的数据做修改,同时使用代理也让我对HTTP协议有了更深的了解. TCP Proxy用到的一个主要的东西就是socket.pro ...

  7. （易忘篇）java基本语法难点1

    switch后面使用的表达式可以是哪些数据类型 byte.short.char.int.枚举类型变量.String类型. 如何从控制台获取String和int型的变量,并输出 // 以下只关注重要点的 ...

  8. SpringBoot 之 拦截配置 与SpringCloud

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.SpringBoot 与 SpringMVC  的区别? SpringMVC是基于Spring的MV ...

  9. JavaScript (一) js的介绍及基本语法变量

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.JS 的 介绍 1.JavaScript :简称 : js js 分为三个部分: 1. ECMASc ...

  10. Java实现 LeetCode 335 路径交叉

    335. 路径交叉 给定一个含有 n 个正数的数组 x.从点 (0,0) 开始,先向北移动 x[0] 米,然后向西移动 x[1] 米,向南移动 x[2] 米,向东移动 x[3] 米,持续移动.也就是说 ...