气泡效果（canvas）

最新推荐文章于 2024-07-26 19:04:42 发布

包头吕布

最新推荐文章于 2024-07-26 19:04:42 发布

阅读量310

点赞数

文章标签： javascript css html html5

本文链接：https://blog.csdn.net/Xiao_hello_world/article/details/104897594

版权

}
body{
background:blue;
}
canvas{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background: white;
}

<body id="body">
<canvas id="cv" width="800" height="800"></canvas>
</body>


var cv = document.querySelector("#cv");
if(cv.getContext){
	var ctx = cv.getContext("2d");
	var arr = [];
	setInterval(function(){
		var step = Math.random()*40;//弧度
		var deg = 0;
		var r = Math.random()*10+5;
		var x = Math.random()*cv.width;
		var y = cv.height - r;
		var red = Math.round(Math.random()*255);
		var green = Math.round(Math.random()*255);
		var blue = Math.round(Math.random()*255);
		var alp = 1;
		
		var startX = x;
		var startY = y;
		arr.push({
			x:x,
			y:y,
			r:r,
			red:red,
			green:green,
			blue:blue,
			alp:alp,
			step:step,
			deg:deg,
			startX:startX,
			startY:startY
		});
		
	},25);
	setInterval(function(){
		ctx.clearRect(0,0,cv.width,cv.height);
		for(var i = 0;i<arr.length;i++){
			arr[i].deg+=10;
			arr[i].y = arr[i].startY - arr[i].deg;
			arr[i].x = arr[i].startX  + Math.sin(arr[i].deg*Math.PI/180 )*arr[i].step*2;
			if(arr[i].y<=20){
				arr.splice(i,1);
			}
			
		}
		console.log(arr);
		for(var i = 0;i<arr.length;i++){
			ctx.save();
			ctx.fillStyle = "rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].alp+")";
			ctx.beginPath();
			ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
			ctx.fill();
			ctx.restore();
		}
	},50);
}