简单的泡沫效果

最新推荐文章于 2024-10-01 20:12:28 发布

包头吕布

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量233

点赞数

文章标签： javascript css html html5

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

版权

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="1000" height="1000"></canvas>
</body>

    var cv = document.querySelector("#cv");
	if(cv.getContext){
		var ctx = cv.getContext("2d");//2d画布
		var arr = [];
	    setInterval(function(){            //在数组里面不断随机添加r g b a 圆的半径和宽、高的值
		    var x = Math.random()*cv.width;
		    var y = Math.random()*cv.height;
		    var r = 50;
		    var red = Math.round(Math.random()*255);
		    var green = Math.round(Math.random()*255);
		    var blue = Math.round(Math.random()*255);
		    var alp = 1;
		    arr.push({
			    x:x,
			    y:y,
			    r:r,
			    red:red,
			    green:green,
			    blue:blue,
			    alp:alp
		    });
		
	    },50);//时间间隔越小 泡沫越密集
	    setInterval(function(){//取出数组的数据进行作画
		    ctx.clearRect(0,0,cv.width,cv.height);
		    for(var i = 0;i<arr.length;i++){
			
			    if(arr[i].alp<=0){    //泡沫炸裂后删除这个泡沫的数据（透明度为0）
				    arr.splice(i,1);
			    }
			    //透明度--
			    //半径++
			    arr[i].r+=2;
			    arr[i].alp-=0.05;
			
		    }
		    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);
	}