利用H5画随机色圆

发表于： 分类于：
字数：306 阅读：≈ 1分钟 浏览：

忽然想到曾经遇到的一个案例：

​ 在页面上绘制随机数量的圆并填充随机色，但鼠标点击圆时该圆逐渐放大，同时透明度降低，直至消失。

在这里用代码重现下，首先分析下需求：

  • 绘制页面：
    • 生成随机数，根据随机数生成随机颜色
    • 利用svg绘图技术在页面绘制随机数量的圆
    • 将圆填充随机色
  • JS事件：

    • 为每个圆绑定单击事件

    • 创建定时器

代码：

  1. 生成随机数和随机颜色方法
/*获取指定范围内的随机数字*/
function randomNum(min,max){
    var n=Math.random()*(max-min)+min;
    return Math.floor(n)
}
/*生成随机色*/
function randomColor(min,max){
    var r=randomNum(min,max);
    var g=randomNum(min,max);
    var b=randomNum(min,max);
    var a=Math.random();
    return `rgba(${r},${g},${b},${a})`;
}
  1. 利用svg绘图

html:

<svg id="svg" width="1000px"  height="500px"></svg>

JavaScript:

var svg=document.getElementById("svg"); 
for(var i=0;i<50;i++){
    //创建圆元素
	var c=document.createElementNS("http://www.w3.org/2000/svg","circle");
    c.setAttribute("r",randomNum(10,80));
    c.setAttribute("cx",randomNum(0,800));
    c.setAttribute("cy",randomNum(0,400));
    c.setAttribute("fill",randomColor(0,255));
    c.setAttribute("fill-opacity",Math.random());
    svg.appendChild(c)
  //绑定单击事件
  c.onclick=function(){
    var that=this;
    //设置循环定时器
    var timer=setInterval(function(){
      var r=that.getAttribute("r");
      r*=1.05;
      that.setAttribute("r",r);
      var fillOpac=that.getAttribute("fill-opacity");
      fillOpac*=0.9;
      that.setAttribute("fill-opacity",fillOpac);
      //设置循环定时器停止条件
      if(fillOpac<0.001){
      	clearInterval(timer);
        timer=null;
       	svg.removeChild(that);
      }
    },20)()
  }
}

附上 codePen链接

效果图: