原素材地址：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. Code Test(1)

    0922test 最小数Time Limit: 1 Sec Memory Limit: 128 MB文件名:a.cppDescription给定一个正整数n,请去掉其中的m个数字,使其剩下的数字按原先 ...

  2. 【题解】SP10570 【LONGCS - Longest Common Substring】

    \(\color{Red}{Link}\) \(\text{Solution:}\) 还是\(\text{Suffix Tree.}\) 根据\(\color{Blue}{Link}\)我们可以得到一 ...

  3. JavaScript判断字符串中出现次数最多的字符，并统计其次数

    要求: 输出一个给定字符串``中出现次数最多的字符,并统计其次数. 实现思路: 利用charA()遍历这个字符串 把每个字符都存储给对象,如果对象没有该属性,就先幅值为1,如果存在了就+1 遍历对象, ...

  4. Docker笔记5：实现加速器，加快下载/拉取镜像速度

    由于 Docker 官方仓库存储于国外服务器,因此,我们使用d ocker pull 命令拉取镜像时,速度很慢.但是,我们可以使用国内服务商提供的加速器进行加速,加速器实质是一个IP地址,将其加入到d ...

  5. DBA提交脚步规范

    工作中需要走脚步流程,申请修改数据库,总结一些常用的语句:)提交时注明为DDL/DML_需求号_日期(各公司标准不一样)//修改字段长度使用;alter table t_task modify tas ...

  6. 女儿拿着小天才电话手表问我App启动流程

    前言 首先,new一个女儿, var mDdaughter = new 女儿("6岁","漂亮可爱","健康乖巧","最喜欢玩小天 ...

  7. python写文件时遇到UnicodeEncodeError: 'gbk' codec can't encode character的解决方式

    在window平台,文件的默认编码是gbk, 此时如果写入的字符串的编码是utf-8就会引发这种错误,打开文件的编码必须与字符串的编码一致 with open('content.txt','w',en ...

  8. jmeter 相关

    Don't use GUI mode for load testing !, only for Test creation and Test debugging. For load testing, ...

  9. 【C/C++编程入门学习】C语言结构体硬核玩法分享，一切皆是数据！

    前言 对于结构体的应用太多了,今天这篇文章我主要为大家总结平时关于结构体的一些独特硬核小技巧,对于结构体更多优秀的编程表现,如果你对结构体的基础知识还不具备的话得回头看一下专栏教程或者自己找本书籍学习 ...

  10. git-submodule子模块的添加、使用和删除

    目录 添加 使用 更新 删除 hugo添加主题的时候 命令如下: git submodule add https://github.com/samrobbins85/hugo-developer-po ...