原素材地址：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. Java知识系统回顾整理01基础04操作符04位操作符

    一.位操作符 位操作符在实际工作中用的并不常见,但是我比较纠结这些位操作.所以实际练习位操作符的每一个操作符的操作实例来理解其具体含义. 建议: 如果确实感兴趣,就看看,个人建议跳过这个章节. 真正工 ...

  2. devops-持续集成管理之SonarQube

    1. devops-持续集成管理之SonarQube  1) 代码质量七宗罪 编码规范:是否遵守了编码规范,遵循了最佳实践. 潜在的BUG:可能在最坏情况下出现问题的代码,以及存在安全漏洞的代码. 文 ...

  3. css实现中间横线俩边文字效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 利用HDFS实现ElasticSearch7.2容灾方案

    利用HDFS实现ElasticSearch7.2容灾方案 目录 利用HDFS实现ElasticSearch7.2容灾方案 前言 快照版本兼容 备份集群 HDFS文件系统 软件下载 JDK环境 配置系统 ...

  5. java字符流与字节流的区别是什么

    java中字符流与字节流的区别: 1.字节流操作的基本单元为字节:字符流操作的基本单元为Unicode码元. 2.字节流默认不使用缓冲区:字符流使用缓冲区. 3.字节流通常用于处理二进制数据,实际上它 ...

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

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

  7. EfCore3的OwnedType会导致Sql效率问题

    最近主导了旗下某核心项目升级到EfCore3 由于之前Core2升级时候也踩过不少的坑很多东西都有规划和准备,整体上还是没出太大问题 但是最近突然发现efcore对于使用了ownedType的生成语句 ...

  8. spring boot: 从配置文件中读取数据的常用方法(spring boot 2.3.4)

    一,从配置文件中读取数据有哪些方法? 通常有3种用法: 1,直接使用value注解引用得到配置项的值 2,  封装到Component类中再调用 3,  用Environment类从代码中直接访问 生 ...

  9. .Net Core单元测试规范

    .Net Core单元测试规范 一. 前言 为了有效提升代码质量,保证DevOps的顺利进行.将全面开始采用单元测试进行覆盖,届时单元测试将完全纳入 到完整的持续构建生命周期中做为第一道质量把控的门槛 ...

  10. vue-awesome-swiper ---移动端h5 swiper 和 tab 栏选项联动效果实现

    很久之前做小程序时有个类似每日优鲜里储值卡充值界面里的 卡轮播和价格tab栏联动效果,当时觉得新鲜做出来之后也没当回事.直到今天又遇到了一个类似的功能,所以想着总结经验. 实现效果如下图: 图解:点击 ...