canvas绘制随机大小颜色泡泡,鼠标单击后变大变淡消失

最新推荐文章于 2023-11-22 10:38:19 发布

qq_24618061

最新推荐文章于 2023-11-22 10:38:19 发布

阅读量633

点赞数

分类专栏： web前端文章标签： javascript canvas web

本文链接：https://blog.csdn.net/qq_24618061/article/details/121568022

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、canvas随机渲染泡泡，鼠标单击后变大变淡消失

完整代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
		svg{
			background:#f2f2f2;
		}
	</style>
  <script></script>
 </head>
 <body>
		<svg id="svg" width="500" height="400">
  		<!-- <circle cx="60" cy="60" r="50" stroke="#f00" stroke-width="10" fill="green" id="circle"></circle>-->
  	</svg> 

	<script>
		var c1=document.createElementNS('http://www.w3.org/2000/svg','circle');
		var cxs=[];
		var cys=[];
		var rs=[];
		var fills=[];
		var circles=[];
		for(var i=0;i<5;i++){
			cxs[i]=Math.floor(Math.random()*500);
			cys[i]=Math.floor(Math.random()*400);
			rs[i]=Math.floor(Math.random()*75+50);
			fills[i]=randColor();
			circles[i]=document.createElementNS('http://www.w3.org/2000/svg','circle');
			circles[i].setAttribute('cx',cxs[i]);
			circles[i].setAttribute('cy',cys[i]);
			circles[i].setAttribute('r',rs[i]);
			circles[i].setAttribute('fill',fills[i]);
			circles[i].onclick=function(){
				var me=this;
				console.log(me);
				var r=me.getAttribute('r');
				console.log(r);
				var o=me.getAttribute('opacity');
				console.log(o);
				if(o===null){o=1;}
				var timer=setInterval(function(){
					r++;
					o-=0.01;
					me.setAttribute('r',r);
					me.setAttribute('opacity',o);
					if(o<=0){
						clearInterval(timer);
						svg.removeChild(me);
					}
				},10);/**/
			}
			svg.appendChild(circles[i]);
		}

		function randColor(){
			var r=Math.floor(Math.random()*155+100);
			var g=Math.floor(Math.random()*155+100);
			var b=Math.floor(Math.random()*155+100);
			return 'rgba('+r+','+g+','+b+')';
		}
	</script>
 </body>
</html>

二、鼠标单击后，canvas再绘制随机大小颜色泡泡后变大消失（可以给小孩玩hahaha~）

完整代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
		svg{
			background:#f2f2f2;
		}
	</style>
  <script></script>
 </head>
 <body>
		<svg id="svg" width="1500" height="900"></svg> 

	<script>
		svg.onclick=function(event){
			var x=event.offsetX;
			var y=event.offsetY;
			draw(x,y);
		}
		function draw(x,y){
			var cx=x;
			var cy=y;
			var r=Math.floor(Math.random()*270+30);
			var circle=document.createElementNS('http://www.w3.org/2000/svg','circle');
			circle.setAttribute('cx',cx);
			circle.setAttribute('cy',cy);
			circle.setAttribute('r',r);
			circle.setAttribute('fill',randColor());
			svg.appendChild(circle);
			var timer=setInterval(function(){
				r++;
				circle.setAttribute('r',r);
				var opa=circle.getAttribute('opacity');
				if(opa===null){opa=1;}
				opa-=0.01;
				circle.setAttribute('opacity',opa);
				if(opa<=0){clearInterval(timer);}
			},10);
		}
		function randColor(){
			var r=Math.floor(Math.random()*155+100);
			var g=Math.floor(Math.random()*155+100);
			var b=Math.floor(Math.random()*155+100);
			return 'rgba('+r+','+g+','+b+')';
		}
	</script>
 </body>
</html>

qq_24618061

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas绘制随机大小颜色泡泡,鼠标单击后变大变淡消失

一、canvas随机渲染泡泡，鼠标单击后变大变淡消失完整代码如下：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> svg{ background:#f2f2f2; } </style> <script></s
复制链接

扫一扫

专栏目录