原素材地址：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. Mbedtls和Opesnssl 解码x509Certificate

    最近项目需要添加解码x509Certificate功能,可以使用openssl或者mbedtls库.对这两个库的使用总结一下. 一 Openssl解码x509 Certificate 1. 初始化   ...

  2. 手把手撸套框架-Victory框架1.1 详解

    目录 上一篇博客 Victory框架1.0 详解  有说道,1.0的使用过程中出现不少缺点,比如菜单不能折叠,权限没有权限组等等. 所以,我还是抽出时间在下班后,回到我的小黑屋里 完成了1.1的升级. ...

  3. 074 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 06 综合案例-数组移位-主方法功能3的实现

    074 01 Android 零基础入门 01 Java基础语法 09 综合案例-数组移位 06 综合案例-数组移位-主方法功能3的实现 本文知识点:综合案例-数组移位-主方法功能3的实现 说明:因为 ...

  4. Inno Setup 5打包exe遇到的坑，做一个学习记录

    ; 脚本由 Inno Setup 脚本向导 生成!; 有关创建 Inno Setup 脚本文件的详细资料请查阅帮助文档! #define MyAppName "人员管理系统"#de ...

  5. Java 客户端操作 FastDFS 实现文件上传下载替换删除

    FastDFS 的作者余庆先生已经为我们开发好了 Java 对应的 SDK.这里需要解释一下:作者余庆并没有及时更新最新的 Java SDK 至 Maven 中央仓库,目前中央仓库最新版仍旧是 1.2 ...

  6. 安装redis，phpstudy

    第一步: 先下载一下我分享自己的百度网盘里面的资料,网友们下载即可 链接:https://pan.baidu.com/s/1SVO-yAEqbFuvhiiI6Dm3VQ 提取码:u8t0 复制这段内容 ...

  7. cmd备份数据库，还原数据库，仅限于php

    第一:先备份数据库 1.进入cmd(黑盒子) 2.进入phpstudy所在的盘 3.cd E: 3.cd phpstudy; 4.cd PHPTutorial 5.cd mysql; 6.cd bin ...

  8. YCM 安装小记

    layout: post title: YCM 安装小记 半夜,女朋友在那边抱怨购物车的物品秒无货,我这边刚好成功安装了vim上最难装的插件--YouCompleteMe,内心非常激动,于是本着取之于 ...

  9. 【找规律】ARC 066D Xor Sum AtCoder - 2272

    题目大意 给出一个整数\(n\),已知\(0\le u,v\le n\),求满足\(a\ xor\ b=u\)且\(a+b=v\)的\(a.b\)对数 样例1输入 3 样例1输出 5 /* u=0,v ...

  10. centos8上使用crond

    一,查看crond的状态: [root@yjweb crontab]# systemctl status crond 说明:和其他service的执行相同: 启动:systemctl start cr ...