前端  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. lin-cms-dotnetcore.是如何方法级别的权限控制的?

    方法级别的权限控制(API级别) Lin的定位在于实现一整套 CMS的解决方案,它是一个设计方案,提供了不同的后端,不同的前端,而且也支持不同的数据库 目前官方团队维护 lin-cms-vue,lin ...

  2. 【Ubuntu】Ubuntu系统启动过程中，输入用户名与密码后登录一直卡在紫色界面问题(未解决，最后通过重装系统)

    0. 前言 由于本电脑为公用电脑,可能由于其他人点了图像界面中推荐的内核更新,导致原来安装的NVIDIA显卡驱动 430 与升级后的 5.0 内核不兼容,从而导致输入用户名后登录一直卡在紫色界面.在排 ...

  3. [Objective-C] 011_数据持久化_NSKeyedArchiver

    在日常开发中对于NSString.NSDictionary.NSArray.NSData.NSNumber这些基本类的数据持久化,可以用属性列表的方法持久化到.plist 文件中.但是一些我们自定义的 ...

  4. zsh 使用通配符功能

    zsh 使用通配符功能 默认情况下 zsh 是不支持通配符 (*) 匹配的: 第一步,打开zsh配置文件 $ vi .zshrc 第二步,最后一行添加下面语句到文本中,保存.退出: setopt no ...

  5. 正则表达式：匹配单个数字重复n次

    匹配单个数字重复n次:(\d)\1{n-1}其中,\d表示一位数字,(\d)表示匹配之后捕获该匹配,并分组并对组进行编号\1表示被捕获的第一个分组{n-1}是因为被捕获的第一个分组已经消耗了一位数字, ...

  6. tomcat漏洞利用总结

    一.后台war包getshell 漏洞利用: tomcat在conf/tomcat-users.xml配置用户权限 <?xml version="1.0" encoding= ...

  7. 04 . Python入门之条件语句

    一. Python条件语句 Python条件语句是通过一条或多条语句执行结果(True或False)来决定执行的代码块. 可以通过下图简单了解语句的执行过程 Python程序语言指定任何非0和非空(n ...

  8. 【算法基础】KMP字符串

    给定一个模式串S,以及一个模板串P,所有字符串中只包含大小写英文字母以及阿拉伯数字. 模板串P在模式串S中多次作为子串出现. 求出模板串P在模式串S中所有出现的位置的起始下标. 输入格式 第一行输入整 ...

  9. 如何从0创建一个react项目

    1. 确保本机电脑安装了yarn和node: 2. 在需要安装的文件夹目录下输入:create-react-app  +(项目名称): PS:上图使用的软件为webStorm 3. 此时一个简单的re ...

  10. Java实现 蓝桥杯 基础练习 特殊的数字

    基础练习 特殊的数字 时间限制:1.0s 内存限制:512.0MB 提交此题 锦囊1 锦囊2 问题描述 153是一个非常特殊的数,它等于它的每位数字的立方和,即153=111+555+333.编程求所 ...