前端  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. 【转】B树、B+树、B*树、R 树、QuadTree

    从B树.B+树.B*树谈到R 树 QuadTree(四叉树) 四叉树空间索引原理及其实现

  2. JAVASE(十七) 多线程：程序、进程、线程与线程的生命周期、死锁、单例、同步锁

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1.程序.进程.线程的理解 1.1 概念 程序(program)是为完成特定任务.用某种语言编写的一组指 ...

  3. （Java实现） 最佳调度问题

    题目描述 假设有n个任务由k个可并行工作的机器完成.完成任务i需要的时间为ti.试设计一个算法找出完成这n个任务的最佳调度,使得完成全部任务的时间最早. 对任意给定的整数n和k,以及完成任务i需要的时 ...

  4. Java实现 LeetCode 699 掉落的方块（线段树？）

    699. 掉落的方块 在无限长的数轴(即 x 轴)上,我们根据给定的顺序放置对应的正方形方块. 第 i 个掉落的方块(positions[i] = (left, side_length))是正方形,其 ...

  5. Java实现 蓝桥杯VIP 算法训练 明明的随机数

    问题描述 明明想在学校中请一些同学一起做一项问卷调查,为了实验的客观性,他先用计算机生成了N个1到1000之间的随机整数(N≤100),对于其中重复的数字,只保留一个,把其余相同的数去掉,不同的数对应 ...

  6. Java动态规划实现最短路径问题

    问题描述 给定一个加权连通图(无向的或有向的),要求找出从每个定点到其他所有定点之间的最短路径以及最短路径的长度. 2.1 动态规划法原理简介 动态规划算法通常用于求解具有某种最优性质的问题.在这类问 ...

  7. 消费者启动，允许期间报task supervisor timed out 异常，解决

    如何解决后端项目启动时抛出 task supervisor timed out 异常 现象描述 后端项目启动时抛出如下异常,但是该后段项目能正常启动并注册到注册中心,不影响功能使用. 2018-10- ...

  8. yum安装配置MySQL数据库

    1.配置yum源 # 先安装wget yum install wget -y     2.下载mysql源安装包 wget http://dev.mysql.com/get/mysql57-commu ...

  9. kebernets常用命令-整理

    1.deployment相关命令 查看所有deployment: kubectl get deployments 查看指定命名空间的所有deployment: kubectl get deployme ...

  10. IP 代理池

    https://github.com/jhao104/proxy_pool 安装依赖 pip install -r requirements.txt 配置 Config/setting.py # Co ...