原素材地址：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. 1.变量：var，let，const

    var在ECMAScript的所有版本中都可以使用,而const和let只能在ES6及更晚的版本中使用. var,let,const三个关键字的区别 var: 1)声明作用域:在函数内部,使用var定 ...

  2. makefile实验四 编译本地的源文件 + 变量的高级主题一

    <一>编译本地的源文件 + 变量的模式替换    实验代码 root@ubuntu:~/Makefile_Test/5make_test# vim makefile target := t ...

  3. std（标准库）和STL（标准模板库）的关系

    C++标准库的内容分为10类: C1.语言支持 C2.输入/输出 C3.诊断 C4.一般工具 C5.字符串 C6.容器 C7.迭代器支持 C8.算法 C9.数值操作 C10.本地化: 下面分类详解: ...

  4. Java知识系统回顾整理01基础01第一个程序07Eclipse使用----找不到类如何解决？

    一.现象 有时候会碰到如图所示的问题,分明有Hello这个类,并且也有主方法,可是运行就会出现找不到或者无法加载类Hello,或者Class Not Found 异常. 出现这个状况,有多种原因造成, ...

  5. 可能是东半球第二好用的软件工具全部在这里（update in 2020.10.09）

    1. 产品经理工具种草 浏览器:Google Chrome 网络浏览器 原型绘制软件:墨刀- 在线产品原型设计与协作平台(https://modao.cc/).摹客mockplus - 摹客,让设计和 ...

  6. SpringSecurity原理

    一.认证的两种方式的介绍 1. 基于Session的认证方式 在之前的单体架构时代,我们认证成功之后都会将信息存入到Session中,然后响应给客户端的是对应的Session中数据的key,客户端会将 ...

  7. .NET 云原生架构师训练营（模块一 架构师与云原生）--学习笔记

    目录 什么是软件架构 软件架构的基本思路 单体向分布式演进.云原生.技术中台 1.1 什么是软件架构 1.1.1 什么是架构? Software architecture = {Elements, F ...

  8. Makefile常用函数(转)

    一.字符串处理函数 1.$(subst FROM,TO,TEXT) 函数名称:字符串替换函数-subst. 函数功能:把字串"TEXT"中的"FROM"字符替换 ...

  9. 详解工程师不可不会的LRU缓存淘汰算法

    大家好,欢迎大家来到算法数据结构专题,今天我们和大家聊一个非常常用的算法,叫做LRU. LRU的英文全称是Least Recently Used,也即最不经常使用.我们看着好像挺迷糊的,其实这个含义要 ...

  10. MySQL中Redo Log相关的重要参数总结

      参数介绍 下面介绍.总结一下MySQL的Redo Log相关的几个重要参数:innodb_log_buffer_size.innodb_log_file_size.innodb_log_files ...