雨滴特效



<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>汇制雨滴</title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

			}

			canvas{

				display: block;

				/*vertical-align: middle;*/

				background: #000;

			}

		</style>

	</head>

	<body>

		<canvas id="canvas">您的浏览器不支持画布，请您更换浏览器</canvas>

	</body>

	<script type="text/javascript">

		var can = document.getElementById('canvas');

		//设置2d绘图

		var ctx = can.getContext('2d')

		//获取浏览器窗口的宽高

		var w = can.width = window.innerWidth;

		var h = can.height = window.innerHeight;

		//自适应浏览器宽高

		 window.onresize = function(){

		    w = can.width = window.innerWidth;

			h = can.height = window.innerHeight;

		 }

		 //canvas绘制矩形

		 //设置矩形框的路径

		 	//ctx.rect(x,y,w,h); //xy 坐标  wh宽高

		 //画出来

		 	//ctx.fill();  //填充方法

		 	//stx.stroke(); //触笔方法 空心的

//		 	ctx.fillStyle = 'red';

//		 	ctx.fillRect(100,100,100,100)

//		 	//绘制圆形

//		 	ctx.arc(250,250,50,0,Math.PI*2,false)

//		 	ctx.strokeStyle = 'red';

//		 	ctx.stroke();

		 //运动

//		 var y = 0;

//		 	setInterval(function(){

//		 		y++;

//		 		//先清空再绘制

//		 		ctx.clearRect(0,0,w,h);

//		 		ctx.fillRect(100,y,100,100)

//		 	},30)

		//雨滴特效

		function Drop(){ //创建雨滴类

		}

		//原型

		Drop.prototype ={

			//初始化

			init:function(){

				this.x = rand(0,w);//雨滴的初始X坐标

				this.y = 0;//雨滴的初始Y坐标

				this.vy = rand(4,5) //雨滴下落的速度

				this.l = rand(0.8*h,0.9*h);//雨滴下落的最大高度

				this.r = 1;//初始半径

				this.vr = 1; //半径增大的速度

				this.a = 1; //初始透明度

				this.va = 0.9; //透明度变化系数

			},

			//绘制

			draw:function(){

				if (this.y>this.l) {

					ctx.beginPath() //开始路径

					//绘制波纹(圆形)

					ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false)

				 	ctx.strokeStyle = 'rgba(0,255,255,'+ this.a + ')';

				 	ctx.stroke();

				}else{

					//绘制下落的雨滴

					//ctx.clearRect(0,0,w,h);

					ctx.fillStyle = 'rgba(0,255,255,1)'

					ctx.fillRect(this.x,this.y,2,10);

				}

				this.update();

			},

			//更新坐标

			update:function(){

				//当y坐标小于1高度的时候就一直累加

				if (this.y<this.l) {

					this.y += this.vy;

				}else{

					//圆形半径增大

//					if (this.r<50) {

//						this.r += this.vr;

//					}else{

//

//					}

					//判断透明度

					if (this.a>0.03) {

						this.r += this.vr;

						if (this.r > 50) {

							this.a *= this.va;

						}

					}else{

						//重新初始化了

						this.init()

					}

				}

//				this.y += this.vy;

			}

		}

		//实例化雨滴对象

//		var drop = new Drop();

//		drop.init();

		var drops = [];

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

			setTimeout(function(){

				var drop = new Drop();

				drop.init();

				drops.push(drop);

			},i*200)

		}

		setInterval(function(){

			//绘制一个透明层

			ctx.fillStyle = 'rgba(0,0,0,0.1)';

			ctx.fillRect(0,0,w,h)

			for (var i=0; i<drops.length; i++) {

				drops[i].draw()

			}

//			drop.draw()

		},1000/60); //帧数

		function rand(min,max){

			return Math.random()*(max-min) +min;//min~MAX

		}

	</script>

</html>

结合canvas做雨滴特效的更多相关文章

  1. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  2. href 做导航 特效

    <div> <div> <%for (int i = 0; i < 200; i++) { %><%=i.ToString() %> <br ...

  3. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

  4. 用Canvas做动画

    之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...

  5. canvas之背景特效

    需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 <!DOCTYPE html> <html> &l ...

  6. 我们能用canvas做什么？

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  7. html5 canvas做的图表插件

    用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...

  8. canvas做动画

    一.绘制图片 ①加载图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. CANVAS模仿龙卷风特效

    大学时候,有一段时间对flash比较感兴趣.去图书馆借了一本很厚很厚的falsh书籍. 翻了几页之后,就再没有往后看过.印象比较深的是作者说他用flash完成了一个龙卷风效果. 一直到现在我也没有看到 ...

随机推荐

  1. Spring MVC文件上传处理

    以下示例显示如何在使用Spring Web MVC框架的表单中上传文件和处理.首先使用Eclipse IDE来创建一个WEB工程,实现一个上传文件并保存的功能.并按照以下步骤使用Spring Web ...

  2. JPA（Java Persistence API）Java持久化API-介绍

    JPA全称: Java Persistence API JPA的宗旨是为POJO提供持久化标准规范,能够脱离容器独立运行,很方便开发和测试.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关 ...

  3. python django -3 视图

    视图 视图接受Web请求并且返回Web响应 视图就是一个python函数,被定义在views.py中 响应可以是一张网页的HTML内容,一个重定向,一个404错误等等 响应处理过程如下图: URLco ...

  4. 关闭数据库时SHUTDOWN: waiting for active calls to complete.处理

    有时候在关闭数据库时,发出shutdown immediate;命令后一直未关闭.查看ALERT日志.在等待一段时间后日志中有提示: SHUTDOWN: waiting for active call ...

  5. java微信开发API解析（四）-自己定义菜单以及个性化菜单实现

    全局说明 * 具体说明请參考前两篇文章. 本文说明 *本文分为五部分: * 工具类AccessTokenUtils的封装 * 自己定义菜单和个性化菜单文档的阅读解析 * 菜单JSON的分析以及构建相应 ...

  6. 3、easyUI-创建 CRUD可创建展开行明细编辑dataGrid（表格）

    同样在上一节中讲到可以编辑的表格,现在讲一般用到的最后一个datagrid(表格)相关的展开明细可编辑的表格: 第三中表格主要应用场景在:列出表格信息,然后点击可以查看详细信息(此处是全部可以编辑,可 ...

  7. Django项目笔记：sessions处理以及复杂对象序列化

    前言:一点题外话 我发现,不更新博客的时候,不是非常忙,就是效率非常低.最近没怎么更新博客,原因是第二种= =.惭愧惭愧. 今天效率出奇的高,一天时间把PassNote后端的接口全部写完了,Djang ...

  8. 1076: [SCOI2008]奖励关

    1076: [SCOI2008]奖励关 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2078  Solved: 1118[Submit][Statu ...

  9. 巨蟒django之权限10,内容梳理&&权限组件应用

    1.CRM项目内容梳理: 2.权限分配 3.权限组件的应用

  10. MongoDB学习笔记—常用命令

    这里记录一下MongoDB常用的命令 数据库相关 创建数据库 use DATABASE_NAME 如果数据库不存在,则创建数据库,否则切换到指定数据库. 删除数据库:切换到要删除的数据库下,执行命令即 ...