<前端 js 实现 代码雨 >
前端 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 实现 代码雨 >的更多相关文章
- 简单物联网:外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- [python爬虫]简单爬虫功能
在我们日常上网浏览网页的时候,经常会看到某个网站中一些好看的图片,它们可能存在在很多页面当中,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材. 我们最常规的做法就是通过鼠标 ...
- Condition线程通信_生产者消费者案例
①Condition 接口描述了可能会与锁有关联的条件变量. 这些变量在用 法上与使用 Object.wait 访问的隐式监视器类似,但提供了更强大的 功能. 需要特别指出的是,单个 Lock 可能与 ...
- String类的内存解析
package com.aff.equals; public class TestString { public static void main(String[] args) { String st ...
- sqlmap tamper脚本备忘录与tamper脚本编写
查看sqlmap全部脚本 $ python sqlmap.py --list-tampers 使用方法 --tamper=TAMPER 2019.9更新后翻译 * apostrophemask.py- ...
- 学习使用pyquery解析器爬小说
一.背景:个人喜欢在网上看小说,但是,在浏览器中阅读小说不是很方便,喜欢找到小说的txt版下载到手机上阅读,但是有些小说不太好找txt版本,考虑自己从网页上爬一爬,自己搞定小说的txt版本.正好学习一 ...
- Rocket - tilelink - Monitor
https://mp.weixin.qq.com/s/6e-G5RSQc7Xje7mQj8-Lag 简单介绍Monitor的实现. 1. 基本介绍 用于监控各个channel上的 ...
- PowerPC-object与elf中的符号引用
https://mp.weixin.qq.com/s/6snzjEpDT4uQuCI2Nx9VcQ 一. 符号引用 编译会先把每个源代码文件编译成object目标文件,然后把所有目标文件链接到一起 ...
- 3. OpenCV-Python——图像梯度算法、边缘检测、图像金字塔与轮廓检测、直方图与傅里叶变换
一.图像梯度算法 1.图像梯度-Sobel算子 dst = cv2.Sobel(src, ddepth, dx, dy, ksize) ddepth:图像的深度 dx和dy分别表示水平和竖直方向 ks ...
- 【Linux】将javaweb项目部署到CentOS的tomcat上
1.将项目打包成war包 build之后war文件就生成了. 2.拷贝war文件到CentOS的tomcat的项目文件夹中 用WinSCP将文件粘帖进这个文件夹中 /wocloud/tomcat_cl ...
- MySQL国内镜像下载地址
最近重新下载MySQL发现官网下载速度不是一般的慢,官网下载要几个钟而且一不注意就被取消下载了,实在受不了 可以使用sohu的镜像:http://mirrors.sohu.com/mysql/MySQ ...