js实现雨滴特效

最新推荐文章于 2024-04-11 15:29:32 发布
最新推荐文章于 2024-04-11 15:29:32 发布
阅读量1k 收藏 4
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36534304/article/details/83478288
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		canvas{			
			background-color: black;
			display: block;
		}
		
	</style>
	<body>
		<canvas id="canvas">
			
			ni hao
		</canvas>
		
		<script>
			var can=document.getElementById("canvas");
			//设置绘图环境
			var cxt=can.getContext("2d");
			
			var w=can.width=window.innerWidth;
			var h=can.height=window.innerHeight;
			//让画布的宽高跟随浏览器变化
			window.onresize=function(){
			var w=can.width=window.innerWidth;
			var h=can.height=window.innerHeight;
			}
			/*//设置画笔颜色
			//cxt.fillStyle="red";
			//绘制图形
			//cxt.fillRect(0,0,50,50);//x,y,宽，高
			//cxt.fill();填充方法（实心） cxt.stroke();触笔方法（空心）
			//设置圆形的路径
			//cxt.arc(250,250,4,0,Math.PI*2,false);//圆心坐标X,Y 半径r，从0度，弧度（math.pi*角度、180）
			//cxt.fill();*/
			var x=100,y=0;
			/*setInterval(function(){
				y++;
				//清除
				cxt.clearRect(0,0,w,h);
				cxt.fillRect(x,y,50,50);
				
			},10);*/
			/*function move(){
				y++;
				cxt.clearRect(0,0,w,h);
				cxt.fillRect(x,y,50,50);
				requestAnimationFrame(move);//原生js的动画
				
			}
			move();*/
			
			//面向对象
			//创建雨滴对象
			var drops=[];
			function Drop(){}
				//添加对象方法
				Drop.prototype={
					init:function(){
						//初始化方法：设置每个雨滴的初始属性
						this.x=random(0,w);
						this.y=0;
						//y方向的速度值
						this.vy=random(2,3);
						
						//最大高度
						this.l=random(0.8*h,0.9*h);
						//波纹的半径
						this.r=1;
						this.vr=1;
						//判断雨滴消失的透明度
						this.a=1;//趋向于0
						this.va=0.96;//透明度的变化系数
						
									
					},
					draw:function(){//绘制图形
						if(this.y>this.l)
						{
							cxt.beginPath();//先开始路径
							cxt.arc(this.x,this.y,this.r,0,Math.PI*2,false);
							cxt.strokeStyle="rgba(0,255,255,"+this.a+")";
							cxt.stroke()
						}
						else
						{
							cxt.fillStyle="rgb(0,255,255)";
							cxt.fillRect(this.x,this.y,2,2);
						}
						
						this.update();
					},
					update:function(){//更新
						if(this.y<this.l)
						{
							this.y+=this.vy;
						}
						else
						{
							if(this.a>0.03)
							{
								this.r+=this.vr;
								if(this.r>50)
								{
									this.a*=this.va;
								}
							}
							else{
								//初始化雨滴数据
								this.init();
							}
							
						}
						
					}
				}
			
				
				/*var drop=new Drop();
				drop.init();
				drop.draw();*/
			
			/*function dd(){for (var i=0;i<30;i++) {
				var drop=new Drop();
				drop.init();
				//drop.draw();
				drops.push(drop);
			}
			requestAnimationFrame(dd);
			}
			dd();	*/
			
			for (var i=0;i<30;i++) {
				setTimeout(function(){
					var drop=new Drop();
				drop.init();
				//drop.draw();
				drops.push(drop);
				},i*200);
				
			}
			function move(){
				//先绘制透明层再绘制雨滴，雨滴把先绘制的雨滴覆盖
				cxt.fillStyle="rgba(0,0,0,0.1)";				
				cxt.fillRect(0,0,w,h);
				for (var i=0;i<drops.length;i++) {
				drops[i].draw();
			}
				requestAnimationFrame(move);
			}
			move();
			
			//生成随机数的方法
			function random(min,max){
				return Math.random()*(max-min)+min;
			}
		</script>
	</body>
</html>

 

乘浮北冥
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现各种酷炫的水滴效果
08-11
基于canvas技术做出的各种水滴效果，有菜单等，效果酷炫。（非原创）
2.canvas 模拟水滴滴落产生波纹
weixin_30251587的博客
03-31 165
html： <canvas id="canvas" style="background:#f5f5f5"></canvas> css: *{ margin:0; padding:0; overflow: hidden; } js: (function(window,factory){if(...
用html写一个雨的特效
最新发布
liulang68的博客
04-11 4093
【代码】用html写一个雨的特效。
jQuery UI炫酷雨滴落在水面上的波纹涟漪特效
weixin_33743880的博客
06-04 219
raindrops是一款效果很炫酷的jQuery UI雨滴落在水面上的特效。该特效模拟水滴从空中落入平静的水面上的效果。通过參数能够设置水面波纹的大小，强度，波纹扩散的速度等等属性。 效果演示：http://www.htmleaf.com/Demo/201506041968.html 下载地址：http://www.htmleaf.com/jQuery/Layout-Inter...
CSS+JS---Button按钮水滴涟漪动画（仿material-ui）
qq_39295665的博客
08-26 724
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .btn{
Rainyday.js – 傻眼了！竟然有如此逼真的雨滴效果
10-30
Rainyday.js – 傻眼了！竟然有如此逼真的雨滴效果
【JavaScript源代码】JavaScript canvas实现雨滴特效.docx
12-28
JavaScript canvas实现雨滴特效 　本文实例为大家分享了canvas实现雨滴特效的具体代码，供大家参考，具体内容如下　一、雨滴特效需求　雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失，雨滴特效随...
HTML5实现晶莹剔透的雨滴特效
09-28
JavaScript脚本引用了一个名为`rainyday.js`的外部文件，这是实现雨滴特效的核心代码。 接着，`<body>`标签内的`onload`事件在页面加载完成后调用`demo()`函数。这个函数初始化了雨滴特效。`RainyDay`是一个对象，...
js动态特效：雨滴效果
05-29
动态雨滴效果，滑过玻璃的效果，可以有多种背景效果。
下落雨滴特效
09-26
下落雨滴特效，JS制作。
雨滴特效js源代码
12-16
js原生代码
html5 canvas玻璃上雨滴动画特效
08-24
html5 canvas玻璃上雨滴动画特效
html5实现的雨滴背景
12-31
主要是用html5的幕布才画出雨滴的形状，文件十分简单，即插即用
js特效：纯JS制作的窗户雨滴效果，不下载后悔哦
04-14
本站推荐的代码是用JS制作的窗户雨滴效果，绚丽的效果不亚于FLASH，由于不知出处在哪，总而言之， 在此感谢作者的慷慨分享。
Html5下炫酷文字雨滴效果_简单实现
热门推荐
再难的事，做着做着也就顺了
10-17 1万+
@yuHG在学习h5，需要做个炫酷文字效果，让我帮忙，我也快速学习下html知识，写个demo。 先看下效果： 动态图：http://yunpan.cn/cFdKWrfA7gv2B 访问密码 7dbc所用到的知识点 canvas <canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。 <canvas> 标签只是图形容器，必须使用脚本来绘制图形。
js实现的图片雨滴特效
iteye_16836的博客
02-05 399
这是一款利用js实现的模拟雨滴落在玻璃表面的特效，其中令人称奇的是整个过程雨滴会不简单的模出来，效果十分逼真。   演示地址     下载地址 ...
js高级（一）
tianpeiwen的专栏
11-13 314
1,解释型   vs  编译型 解释型，php  javascript 解释型，就是先翻译成计算机能够认识的二进制语言，解释一行代码就执行， 编译型 语言：先把代码翻译成计算机能够认识的语言之后，要生成一个二进制文件，exe，以后等再去执行代码的时候就。。。   基本数据类型： 1， 基本数据类型是值传递 2， 引用数据类型是引用传递   Undefined，首先他就是一个值，声明
使用 HTML5 Canvas 绘制出惊艳的水滴效果
weixin_33708432的博客
11-13 657
　　HTML5 在不久前正式成为推荐标准，标志着全新的 Web 时代已经来临。在众多 HTML5 特性中，Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作，具有极大的应用价值。 　　这里分享一个惊艳的 Canvas 水滴效果，双击可以把水滴分离；拖放到一起可以融合；晃动浏览器可以让水滴跳动；键盘左右键可以切换皮肤；上下键可以变换大小。   ...
html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
weixin_39731682的博客
06-03 388
代码如下所示：Document.btn{display: block;width: 300px;height: 100px;margin: 50px;outline: 0;overflow: hidden;position: relative;transition: .3s;cursor: pointer;user-select: none;text-align: center;line-heig...
unity雨滴粒子特效
08-29
要在Unity中创建雨滴粒子特效，可以按照以下步骤进行操作： 1. 首先，找一张雨点的贴图，并将其做成材质球。使用Legacy Shader/Particles/Additive Shader，并选择贴图。根据需要，可以调整颜色以达到期望的效果。如果选择Particles/Alpha Blended Shader，可能会导致效果很暗，类似于黑色的雨滴。 2. 创建一个粒子系统，并将其命名为rain。将粒子系统的Rotation的X值从-90改为90，这样粒子就会向下运动。将粒子系统的Renderer中的Material改为自己新建的材质，这样粒子就会变成雨点。将Shape改为Box，可以形成类似降雪的效果。根据需要，可以调节Scale的大小来形成降雨区域。勾选Color over Lifetime，可以创建一个从透明到不透明的渐变效果。 3. 根据需要，可以调整粒子的速度和密度来使其更逼真。可以通过调整粒子系统的参数来实现这一点。 根据引用和引用中所提供的信息，可以得出以上关于unity雨滴粒子特效的步骤和方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [unity用粒子系统做雨的特效](https://blog.csdn.net/littielucky/article/details/111350348)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [unity粒子特效-实现下雨效果](https://blog.csdn.net/a201808064823/article/details/111572358)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值