非常不错的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>
时间： 2024-10-05 13:35:22