一、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>