javascript canvas 生成蕾丝花边

var canvas=document.createElement("canvas");
                canvas.setAttribute("style","background:#000");
                canvas.width=document.body.clientWidth,canvas.height=document.body.clientHeight;
                document.body.appendChild(canvas);
                ctx=canvas.getContext("2d");
                w=document.body.offsetWidth,h=document.body.offsetHeight;
                function dwg(xs,ys,g){
                
                ctx.beginPath();
                ctx.strokeStyle=g;
              ctx.arc(w/2+ys,h/2+xs+50,20,0,Math.PI*2);
               
                ctx.stroke();
                ctx.closePath();}
                var f=0;
                function recursion(n){
                    this.x=1,this.y=1,this.arr=[1,1],this.sum=0;
                    for(var p=0;p<n;p+=1){
                        this.sum=this.x+this.y;
                        this.x=this.y;
                        this.y=this.sum;
                        this.arr.push(this.sum);
                    }
                    return this.arr;
                }
      
              function random(n,n1){
                  if(n<n1){
                      [n,n1]=[n1,n]
                  }
                  return Math.floor(Math.random()*(n-n1+1)+n);
              }

              function randoms(){
                  return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
              }    

              var xc=recursion(12);    
            var  x=0,r=0,z=0;
               setInterval(function(){
                   x=x+1;
                   r=r+.1;
               
             
                    dwg(Math.sin(x)*r,Math.cos(x)*r,"#fff");
                   
                },1000/100);
        </script>