canvas粒子下雨涟漪波纹动画效果代码-html代码-BFW代码库

canvas粒子下雨涟漪波纹动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas粒子下雨涟漪波纹动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>雨滴下落（canvas）</title>
	<style type="text/css">
		canvas {
			background: rgb(56, 163, 179);
			display: block;
		}

		* {
			margin: 0;
			padding: 0;
		}
	</style>
</head>

<body>
	<canvas id="canvas">您的浏览器不支持画布，请您更换浏览器!!</canvas>
	<script type="text/javascript">
		var can = document.getElementById("canvas");
		//设置2d绘图环境
		var ctx = can.getContext("2d");

		//获取浏览器窗口的宽高
		var w = can.width = window.innerWidth,
			h = can.height = window.innerHeight;
		//自适应浏览器窗口
		window.onresize = function () {
			w = can.width = window.innerWidth,
				h = can.height = window.innerHeight;
		}
		//         ctx.fillStyle="yellow"
		//       ctx.fillRect(100,100,100,100);
		//       //  绘制圆形
		//    ctx.arc(250,250,50,0,Math.PI*2,false);
		//    ctx.strokeStyle="yellow";
		//    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); //雨滴的初始化坐标
				this.y = 0; //雨滴y轴方向的坐标
				this.vy = rand(8, 9); //雨滴下落的速度
				this.l = rand(h * 0.8, h * 0.9); //雨滴下落的高度
				this.r = 1;
				this.vr = 1; //半径增加的速度
				this.a = 1.........完整代码请登录后点击上方下载按钮下载查看