前端  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. Kivy中ActionBar控件的使用

    这个控件可以作为导航栏来使用,效果非常好. 1. ActionBar包含的组件 ActionBar中需要一个ActionView作为容器来存放其他控件,比如:ActionPrevious.Action ...

  2. CSS综合案例

    代码示例:新闻页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. [FlashDevelop] 001.FlashDevelop + LayaFlash环境搭建

    产品简介: 唯一使用Flash直接开发或转换大型HTML5游戏的全套解决方案. 开发工具 FlashDevelop + JDK + flashplayer_18_sa_debug + LayaFlas ...

  4. DataFrame的apply用法

    DataFrame的apply方法: def cal_value_percent(row,total_value): row['new_column']=row[estimated_value_col ...

  5. JAVASE(十八) 反射： Class的获取、ClassLoader、反射的应用、动态代理

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1.反射(JAVA Reflection)的理解 1.1 什么是反射(JAVA Reflection) ...

  6. JAVASE(九)面向对象特性之 ： 继承性、方法重写、关键字super、

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 1.继承性 1.1 为什么要类的继承性?(继承性的好处) ①减少了代码的冗余,提高了代码的复用性:②更好 ...

  7. Java实现 LeetCode 202 快乐数

    202. 快乐数 编写一个算法来判断一个数是不是"快乐数". 一个"快乐数"定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复这个过 ...

  8. System.PlatformNotSupportedException:“Operation is not supported on this platform.”

    vs2019创建.net core3.1 的控制台应用程序 执行以下代码: using System; using System.Diagnostics; using System.Threading ...

  9. 01 . Docker原理部署及常用操作命令

    Docker的来源及构造: 容器是一种基础工具:泛指任何用于容纳其他物品的工具,可以部分或完全封闭,被用于容纳,储存,运输物品: 物品可以被放置在容器中,而容器可以保护内容物: 人类使用容器的历史有十 ...

  10. @codeforces - 594E@ Cutting the Line

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个字符串 s 与正整数 k.现在你需要进行恰好一次操作: ...