首页 > 代码库 > 非常不错的canvas效果，线随心动

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

2024-09-14 18:49:30   216人阅读

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

  1 <!DOCTYPE html>
  2 <html>
  3  <head>
  4   <meta charset="utf-8" />
  5   <meta name="author" content="" />
  6   <meta name="keywords" content="" />
  7   <meta name="description" content="" />
  8   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
  9   <title>  似圆非圆，似线非线 </title>
 10   <style>
 11     .stage{position:absolute;left:0;top:0;width:100%;height:100%;background:#000;}
 12   </style>
 13  </head>
 14  <body>
 15   <canvas class="stage"></canvas>
 16   <script>
 17     (function(win,el){
 18         var cvs=document.querySelector(el),
 19             ctx=cvs.getContext("2d"),
 20             width,
 21             height,
 22             mouse={},
 23             scale=1,
 24             min_scale=1,
 25             max_scale=2.5,
 26             isMouseDown=false,
 27             radius=50,
 28             circlesNum=10,
 29             circles=[];
 30 
 31             Function.prototype.method=function(k,v){
 32                return this.prototype[k]=v,this;
 33             };
 34 
 35             function Circle(x,y,center,radius){
 36                this.x=x;
 37                this.y=y;
 38                this.curX=x;
 39                this.curY=y;
 40                this.center=center;
 41                this.speed=0.01+Math.random()*0.04;
 42                this.angle=0;
 43                this.color="hsl("+Math.random()*360+",100%,50%)";
 44                this.lineWidth=1;
 45                this.targetWidth=5;
 46                this.radius=radius;
 47             }
 48 
 49             Circle.method("draw",function(ctx,zoom){
 50                 var x=this.x,y=this.y;
 51                 this.angle+=this.speed;
 52 
 53                 this.curX+=(this.center.x-this.curX)*this.speed;
 54                 this.curY+=(this.center.y-this.curY)*this.speed;
 55 
 56 
 57                 this.x=this.curX+Math.cos(this.angle)*this.radius*zoom;
 58                 this.y=this.curY+Math.sin(this.angle)*this.radius*zoom;
 59                 this.lineWidth+=(this.targetWidth-this.lineWidth)*0.05;
 60 
 61                 if(Math.abs(this.targetWidth-this.lineWidth)<0.5)
 62                 {
 63                    this.targetWidth=1+Math.random()*6;
 64                 }
 65 
 66                 ctx.strokeStyle=this.color;
 67                 ctx.lineWidth=this.lineWidth;
 68                 
 69                 
 70                 ctx.beginPath();
 71                 ctx.moveTo(x,y)
 72                 ctx.lineTo(this.x,this.y);
 73 
 74                 ctx.stroke();
 75     
 76             });
 77 
 78             function init(){
 79                 var bound=cvs.getBoundingClientRect(),i=circlesNum,segment=i*10;
 80                 cvs.width=width=bound.width;
 81                 cvs.height=height=bound.height;
 82 
 83                 ctx.fillStyle="rgba(0,0,0,.05)";
 84                 ctx.lineCap="round";
 85 
 86                 mouse.x=width/2;
 87                 mouse.y=height/2;
 88 
 89                 while(i--)
 90                   circles[i]=new Circle(0,0,mouse,radius+Math.random()*segment);
 91 
 92                 cvs.addEventListener("mousemove",function(e){
 93                     mouse.x=e.clientX;
 94                     mouse.y=e.clientY;
 95                 },false);
 96 
 97                 cvs.addEventListener("mousedown",function(){
 98                     isMouseDown=true;
 99                 },false);
100 
101                 cvs.addEventListener("mouseup",function(){
102                     isMouseDown=false;
103                 },false);
104                 cvs.addEventListener("mouseout",function(){
105                     isMouseDown=false;
106                 },false);
107 
108                 render();
109             }
110 
111             function render(){
112               var i=circlesNum;
113               scale+=isMouseDown?(max_scale-scale)*0.05:(min_scale-scale)*0.05;
114               ctx.fillRect(0,0,width,height);
115 
116               while(i--)
117                  circles[i].draw(ctx,scale);
118 
119               requestAnimationFrame(render);
120 
121             }
122 
123             init();
124 
125     })(this,".stage");
126   </script>
127  </body>
128 </html>

 

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


联系
我们