非常不错的canvas效果，线随心动

非常不错的canvas效果，下面是html代码。

 <!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8" />
   <meta name="author" content="" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
   <title>  似圆非圆，似线非线 </title>
   <style>
     .stage{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;}
   </style>
  </head>
  <body>
   <canvas class="stage"></canvas>
   <script>
     (function(win,el){
         var cvs=document.querySelector(el),
             ctx=cvs.getContext("2d"),
             width,
             height,
             mouse={},
             scale=1,
             min_scale=1,
             max_scale=2.5,
             isMouseDown=false,
             radius=50,
             circlesNum=10,
             circles=[];

             Function.prototype.method=function(k,v){
                return this.prototype[k]=v,this;
             };

             function Circle(x,y,center,radius){
                this.x=x;
                this.y=y;
                this.curX=x;
                this.curY=y;
                this.center=center;
                this.speed=0.01+Math.random()*0.04;
                this.angle=0;
                this.color="hsl("+Math.random()*360+",100%,50%)";
                this.lineWidth=1;
                this.targetWidth=5;
                this.radius=radius;
             }

             Circle.method("draw",function(ctx,zoom){
                 var x=this.x,y=this.y;
                 this.angle+=this.speed;

                 this.curX+=(this.center.x-this.curX)*this.speed;
                 this.curY+=(this.center.y-this.curY)*this.speed;

                 this.x=this.curX+Math.cos(this.angle)*this.radius*zoom;
                 this.y=this.curY+Math.sin(this.angle)*this.radius*zoom;
                 this.lineWidth+=(this.targetWidth-this.lineWidth)*0.05;

                 if(Math.abs(this.targetWidth-this.lineWidth)<0.5)
                 {
                    this.targetWidth=1+Math.random()*6;
                 }

                 ctx.strokeStyle=this.color;
                 ctx.lineWidth=this.lineWidth;

                 ctx.beginPath();
                 ctx.moveTo(x,y)
                 ctx.lineTo(this.x,this.y);

                 ctx.stroke();

             });

             function init(){
                 var bound=cvs.getBoundingClientRect(),i=circlesNum,segment=i*10;
                 cvs.width=width=bound.width;
                 cvs.height=height=bound.height;

                 ctx.fillStyle="rgba(0,0,0,.05)";
                 ctx.lineCap="round";

                 mouse.x=width/2;
                 mouse.y=height/2;

                 while(i--)
                   circles[i]=new Circle(0,0,mouse,radius+Math.random()*segment);

                 cvs.addEventListener("mousemove",function(e){
                     mouse.x=e.clientX;
                     mouse.y=e.clientY;
                 },false);

                 cvs.addEventListener("mousedown",function(){
                     isMouseDown=true;
                 },false);

                 cvs.addEventListener("mouseup",function(){
                     isMouseDown=false;
                 },false);
                 cvs.addEventListener("mouseout",function(){
                     isMouseDown=false;
                 },false);

                 render();
             }

             function render(){
               var i=circlesNum;
               scale+=isMouseDown?(max_scale-scale)*0.05:(min_scale-scale)*0.05;
               ctx.fillRect(0,0,width,height);

               while(i--)
                  circles[i].draw(ctx,scale);

               requestAnimationFrame(render);

             }

             init();

     })(this,".stage");
   </script>
  </body>
 </html>