前端  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. [ES6系列-01]Class：面向对象的“新仇旧恨”

    [原创]CoderPower 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 这是公众号(码路工人有力量)开通后的第二篇,写得还是有待改进吧.这次准备写一个关于ES6基础的短文系列,努力尽快 ...

  2. TJA1040

    TJA1040是NXP公司推出的一款针对汽车电子行业使用的高性能CAN收发器. TJA1040的第5引脚名称为SPLIT,描述为:稳定共模输出(common-mode stabilization ou ...

  3. Java的基本数据类型及其封装类

    Java的基本数据类型及其封装类 一.8种基本数据类型 二.基本数据类型的包装类及大小 三.基本数据类型和封装类的区别 定义不同.封装类是对象,基本数据类型不是: 使用方式不同.封装类需要先new初始 ...

  4. switch-case与if-else的转换

    对学会成绩大于60分的,输出合格,低于60分的输出不合格 import java.util.Scanner; public class TestSwitch3 { public static void ...

  5. Function's dict

    众所周知,Python是没有switch的,那么只能使用 if else来进行判断,但是if else比较冗长, 使用太多的if else 代码看起来不简洁,如下 student.py def stu ...

  6. Rocket - tilelink - TLArbiter

    https://mp.weixin.qq.com/s/0ob-Fq-ZOoj-_S7pTJu6rQ   介绍TLArbiter的实现,主要关注如何实现burst的多个beat的输出.   ​​   1 ...

  7. Chisel3 - 接口方向（Direction）

    https://mp.weixin.qq.com/s/36jreQGpDLCCNfmUwI34lA   模块接口有三种方向:Input/Output/Inout.Chisel在声明模块接口的时候,也需 ...

  8. Java实现 LeetCode 792 自定义字符串排序（暴力）

    792. 匹配子序列的单词数 给定字符串 S 和单词字典 words, 求 words[i] 中是 S 的子序列的单词个数. 示例: 输入: S = "abcde" words = ...

  9. Java中StringBuffer类的常用方法

    StringBuffer:StringBuffer类型 描述:在实际应用中,经常回遇到对字符串进行动态修改.这时候,String类的功能受到限制,而StringBuffer类可以完成字符串的动态添加. ...

  10. Java实现第十届蓝桥杯数的分解

    试题 D: 数的分解 本题总分:10 分 [问题描述] 把 2019 分解成 3 个各不相同的正整数之和,并且要求每个正整数都不包 含数字 2 和 4,一共有多少种不同的分解方法? 注意交换 3 个整 ...