美文网首页
利用H5画随机色圆

利用H5画随机色圆

作者: 靖风行 | 来源:发表于2018-03-08 20:56 被阅读15次

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

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

    在这里用代码重现下,简单说下步骤:

    • 绘制页面:
      • 生成随机数,根据随机数生成随机颜色
      • 利用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链接

    效果图:


    效果

    相关文章

      网友评论

          本文标题:利用H5画随机色圆

          本文链接:https://www.haomeiwen.com/subject/gzqufftx.html