原素材地址：http://www.htmlsucai.com/demo-9782.html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title></title>

		<style type="text/css">

			#rain {

				position: fixed;

				z-index: -1;

				top: 0;

				left: 0;

				opacity: 0.4;

				width: 100vw;

				height: 100vh;

			}

		</style>

	</head>

	<body>

		<canvas id="rain"></canvas>

		<script type="text/javascript">

			window.onload = main;

			function getRgb(r, g, b) {

				return "rgb(" + r + "," + g + "," + b + ")";

			}

			function main() {

				//drop

				var dropList = [];

				var gravity = 0.4;

				//

				var linelist = [];

				var canvasEl = document.getElementById('rain');

				var ctx = canvasEl.getContext('2d');

				var mousePos = [0, 0];

				var backgroundColor = '#000';

				canvasEl.width = canvasEl.clientWidth;

				canvasEl.height = canvasEl.clientHeight;

				var speedx = 0;

				var maxspeedx = 0;

				window.onresize = function() {

					canvasEl.width = canvasEl.clientWidth;

					canvasEl.height = canvasEl.clientHeight;

				}

				window.onmousemove = function(e) {

					mousePos[0] = e.clientX;

					mousePos[1] = e.clientY;

					maxspeedx = (e.clientX - canvasEl.clientWidth / 2) / (canvasEl.clientWidth / 2);

				}

				// window.onmousedown=function(e)

				function createLine(e) {

					var temp = 0.25 * (50 + Math.random() * 100);

					var myline = {

						speed: 4.5 * (Math.random() * 6 + 3),

						die: false,

						posx: e,

						posy: -200,

						h: temp,

						color: getRgb(Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75), Math.floor(temp * 255 / 75))

					};

					linelist.push(myline);

				}

				window.requestAnimationFrame(update);

				function createDrop(x, y) {

					var mydrop = {

						die: false,

						posx: x,

						posy: y,

						vx: (Math.random() - 0.5) * 8,

						vy: Math.random() * (-6) - 3,

						radius: Math.random() * 1.5 + 1

					};

					return mydrop;

				}

				function madedrops(x, y) {

					var maxi = Math.floor(Math.random() * 5 + 5);

					for (var i = 0; i < maxi; i++) {

						dropList.push(createDrop(x, y));

					}

				}

				function update() {

					if (dropList.length > 0) {

						dropList.forEach(function(e) {

							e.vx = e.vx + (speedx) / 2;

							e.posx = e.posx + e.vx;

							e.vy = e.vy + gravity;

							e.posy = e.posy + e.vy;

							if (e.posy > canvasEl.clientHeight) {

								e.die = true;

							}

						});

					}

					for (var i = dropList.length - 1; i >= 0; i--) {

						//delite die

						if (dropList[i].die) {

							dropList.splice(i, 1);

						}

					}

					speedx = speedx + (maxspeedx - speedx) / 50;

					if (Math.random() > 0) {

						createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width));

						createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width));

						createLine(Math.random() * 2 * canvasEl.width - (0.5 * canvasEl.width));

					}

					var mydeadline = canvasEl.clientHeight - Math.random() * canvasEl.clientHeight / 5;

					linelist.forEach(function(e) {

						var dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos[0]) * ((e.posx + speedx * e.h) - mousePos[0]) + (e.posy +

							e.h - mousePos[1]) * (e.posy + e.h - mousePos[1]));

						if (dis < 35) {

							madedrops(e.posx + speedx * e.h, e.posy + e.h);

							e.die = true;

						}

						if ((e.posy + e.h) > mydeadline) {

							if (Math.random() > 0.85) {

								madedrops(e.posx + speedx * e.h, e.posy + e.h);

								e.die = true;

							}

						}

						if (e.posy >= canvasEl.clientHeight) {

							e.die = true;

						} else {

							e.posy = e.posy + e.speed;

							e.posx = e.posx + (e.speed * speedx);

						}

					});

					for (var i = linelist.length - 1; i >= 0; i--) {

						if (linelist[i].die) {

							linelist.splice(i, 1);

						}

					}

					render();

					window.requestAnimationFrame(update);

				}

				function render() {

					ctx.fillStyle = backgroundColor;

					ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);

					linelist.forEach(

						function(line) {

							ctx.strokeStyle = line.color;

							ctx.lineWidth = 4.5;

							ctx.beginPath();

							ctx.moveTo(line.posx, line.posy);

							ctx.lineTo(line.posx + speedx * line.h, line.posy + line.h);

							ctx.stroke();

						});

					ctx.lineWidth = 1;

					ctx.strokeStyle = "#fff";

					dropList.forEach(function(e) {

						ctx.beginPath();

						ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI);

						ctx.stroke();

					});

				}

			}

		</script>

	</body>

</html>

　　

　　

html+canvas实现很真实的下雨雨落的更多相关文章

  1. canvas用数组方式做出下雨效果

    效果图 1.做出canvas画布和声明一个用来存储雨滴的数组 var c=document.getElementById('myCanvas'); var ctx= c.getContext('2d' ...

  2. Canvas 最佳实践（性能篇）

    Canvas 想必前端同学们都不陌生,它是 HTML5 新增的「画布」元素,允许我们使用 JavaScript 来绘制图形.目前,所有的主流浏览器都支持 Canvas. Canvas 最常见的用途是渲 ...

  3. 雨后清风U盘启动盘的五大用处及制作方法

    如果有一个U盘可以帮助你安装系统,或者在你的电脑系统崩溃时帮助你修复系统,是不是很方便呢?雨后清风U盘启动盘就能帮你实现这样的效果.除此之外,雨后清风U盘启动盘还有另外一些用处.下面就来和大家分享一下 ...

  4. 【Canvas】(1)---概述+简单示例

    Canvas---概述+简单示例 如果通俗的去理解Canvas,我们可以去理解成它类似于我们电脑自带的画图工具一样,canvas首先是选择一块画布,然后在这个画布上描绘我们想画的东西,画好后展示给用户 ...

  5. canvas学习之API整理笔记（一）

    其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...

  6. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  7. HTML5 canvas beginPath() 方法

    beginPath() 方法开始一条路径,或重置当前的路径.w3school上的解释! 路径是canvas里很重要的一个概念,刚开始学canvas的人对路径理解不是很深,他们在用canvas的时候会乱 ...

  8. Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

    来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...

  9. html5 Canvas处理图像 实例讲解

    最近在学习canvas,canvas有很强大的图像处理功能,下面写一个我的学习总结: canvas常用功能: 1. 绘制矩形.圆形.曲线.组合图形 2. 绘制文本 3.绘制渐变.变形的图形 4. 图片 ...

随机推荐

  1. k8s下的jenkins如何设置maven

    关于k8s环境的jenkins集群 k8s下搭建了jenkins集群后,执行任务时会新建pod,任务完成后pod被销毁,架构如下图所示: 在k8s搭建jenkins集群的步骤请参照<> 关 ...

  2. Paxos 协议

    可用性与一致性 为了向用户提供更好的服务体验,现代软件架构越来越注重系统的可用性availability. 正是在这种趋势的驱动下,微服务与容器化技术才能在今天大行其道. 而高可用架构的前提是冗余: ...

  3. 03 sublime text3下配置Java的编译运行环境

    参考如下文章,加入了自己的干货: https://blog.csdn.net/qq_38295511/article/details/81140069 https://blog.csdn.net/qq ...

  4. .NET Standard 系列

    .NET Standard 是一套正式的 .NET API 规范,有望在所有 .NET 实现中推出. 推出 .NET Standard 的背后动机是要提高 .NET 生态系统中的一致性. ECMA 3 ...

  5. CentOS7 系统安全的设置

    一.禁止root远程直接登录 # 创建普通用户,并设置密码 useradd bluceli #新建账户 passwd bluceli #设置密码 # 不允许root远程直接登录 vim /etc/ss ...

  6. day65:nginx代理&nginx负载均衡

    目录 1.nginx代理 2.nginx代理与配置 3.nginx负载均衡调度多web节点(静态页面) 4.nginx负载均衡调度多应用节点(blog) 5.nginx_proxy + web应用节点 ...

  7. protoc-c 阅读笔记

    以前和山哥做过类似的,最近想起来,抽空又看了下 protoc-c. 山哥做的报文流向: rpc -> lydtree -> motree -> struct 涉及的细节很多 1) l ...

  8. CSS精灵图与字体图标

    CSS精灵图与字体图标 1. 精灵图 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户.然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多 ...

  9. 多测师讲解RF自动化测试实现流程_高级讲师肖sir

    1.环境搭建过程?­­整套环境需要哪些工具包,以及工具包的作用?因为我搭建的RF框架是基于Python的,所以肯定要先安装Python,python安装完之后,开始安装自动化测试框架rf3.0-在do ...

  10. day25 Pyhton学习 约束和异常处理

    一.类的约束 约束是对类的约束 有两种方法: 1.提取一个父类,在父类中给出一个方法,并且在方法中不给出任何代码,直接抛异常 class Base: def login(self): raise Ex ...