自动画心线条（网页）

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2 <HTML>
  3  <HEAD>
  4   <TITLE> New Document </TITLE>
  5   <META NAME="Generator" CONTENT="EditPlus">
  6   <META NAME="Author" CONTENT="">
  7   <META NAME="Keywords" CONTENT="">
  8   <META NAME="Description" CONTENT="">
  9   <style>
 10   body {
 11     background-color: rgb(29,32,32);    
 12     margin: 0;
 13     overflow: hidden;
 14   
 15 }
 16 .label {
 17     position: absolute;
 18     top: 0;
 19     left: 0;
 20     padding: 5px 15px;
 21     color: #eee;
 22     font-size: 13px;
 23     background-color: rgba(0, 0, 0, .15);
 24 }
 25 .instructions {
 26     position: absolute;
 27     bottom: 0%;
 28     left: 0;
 29     padding: 5px 15px;
 30     color: #eee;
 31     font-size: 13px;
 32     background-color: rgba(0, 0, 0, .15);
 33 }
 34 .label {
 35     position: absolute;
 36     top: 0;
 37     left: 0;
 38     padding: 5px 15px;
 39     color: #eee;
 40     font-size: 13px;
 41     background-color: rgba(0, 0, 0, .15);
 42 }
 43 canvas { display:block; }
 44   </style>
 45  </HEAD>
 46 
 47  <BODY>
 48  <head>
 49   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
 50 </head>
 51 <body>
 52 <canvas id=canvas></canvas>
 53 <div class="label">SPARED THE MISERY OF HOPE</div>
 54 <div class="instructions">MOVE MOUSE AROUND </div>
 55 
 56   </body>
 57   <script>
 58   var ctx = canvas.getContext("2d");
 59 var body = [];
 60 canvas.width = window.innerWidth;
 61 canvas.height = window.innerHeight;
 62 
 63 var mouse_pos_x = canvas.width/2;
 64 var mouse_pos_y = canvas.height/2;
 65 var delta = 1;
 66 var step = 0;
 67 var loop = 0;
 68 var line = 0;
 69 var lineMax = 20;
 70 var lineMin = 5;
 71 var TWO_PI = 2 * Math.PI;
 72 var t = 0;
 73 var animate = true;
 74 var op = 1;
 75 
 76 var bodyLength = 20;
 77 
 78 canvas.addEventListener('mouseleave', mouse_leave);
 79 
 80 canvas.addEventListener('mousemove', mouse_track);
 81 
 82 function mouse_leave(){
 83   animate = true;
 84 }
 85 
 86 
 87 function mouse_track(event) {
 88   animate = false;
 89   if((Math.abs(mouse_pos_x - event.clientX) > delta) || (Math.abs(mouse_pos_y - event.clientY) > delta)){
 90     mouse_pos_x = event.clientX;
 91     mouse_pos_y = event.clientY;
 92   }
 93 }
 94 
 95 
 96 //Colours from:
 97 //https://krazydad.com/tutorials/makecolors.php
 98 
 99 var red = [];
100 var grn = [];
101 var blu = [];
102 
103 center = 128;
104 width = 127;
105 frequency1 = 0.3;
106 frequency2 = 0.3;
107 frequency3 = 0.3;
108 
109 phase1 = 0;
110 phase2 = 2;
111 phase3 = 4;
112 
113 for (s = 0; s < bodyLength; s++) {
114   red[s] = Math.round(Math.sin(frequency1*s + phase1) * width + center);
115   grn[s] = Math.round(Math.sin(frequency2*s + phase2) * width + center);
116   blu[s] = Math.round(Math.sin(frequency3*s + phase3) * width + center);
117 }
118 
119 size = Math.min(canvas.width, canvas.height)/50;
120 //See below
121 var startX = canvas.width/2 + size * (16 * Math.sin(0) * Math.sin(0) * Math.sin(0));
122 var startY = canvas.height - (canvas.height/2 + ( size *( 13 * Math.cos(0)  - 5 * Math.cos(0) - 2 * Math.cos(0) - Math.cos(0))));
123 
124 for (i = 0; i < bodyLength; i++) {
125   var b = {
126     x: startX,
127     y: startY
128   };
129   body.push(b);
130 }
131 
132 //****** DRAW ******//
133 
134 function draw() {
135   
136   t += 0.08;
137   t = t % TWO_PI;
138 
139     if(line <= lineMin){
140       op = 1;
141       line = lineMin+1;
142     }
143     if(line >= lineMax){
144       op = -1;
145       line = lineMax-1;
146     }
147     loop++;
148     if(loop == 5){
149       step++;
150       step = step % bodyLength;
151       loop = 0;
152     }
153   
154   line = op + line;
155   
156   if(animate){
157     size = Math.min(canvas.width, canvas.height)/50;
158     //Heart curve from:
159     //http://mathworld.wolfram.com/HeartCurve.html
160     mouse_pos_x = canvas.width/2 + size * (16 * Math.sin(t) * Math.sin(t) * Math.sin(t));
161     mouse_pos_y = canvas.height - (canvas.height/2 + ( size * ( 13 * Math.cos(t)  - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t))));
162   }
163 
164   canvas.width = window.innerWidth;
165   canvas.height = window.innerHeight;
166 
167   for (i = (body.length-1); i > 0; i--) {
168     body[i].x = body[i-1].x;
169     body[i].y = body[i-1].y;
170   } 
171   body[0].x = mouse_pos_x;
172   body[0].y = mouse_pos_y;
173 
174   ctx.lineWidth = line; 
175   ctx.strokeStyle = "rgb("+red[step]+","+grn[step]+","+blu[step]+")";
176   ctx.fillStyle = "rgb("+red[step]+","+grn[step]+","+blu[step]+")";
177   
178   //Draw leading circle
179   ctx.beginPath();
180   ctx.arc((body[0].x), (body[0].y), line/2, 0, TWO_PI);
181   ctx.fill();
182   
183   //Draw line
184   ctx.beginPath();
185   ctx.moveTo(body[0].x, body[0].y);
186 
187   for(s = 0; s < body.length - 2; s++){
188 
189     //Bezier curve along points taken from: 
190     //http://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas
191 
192     var xc = (body[s].x + body[s+1].x) / 2;
193     var yc = (body[s].y + body[s+1].y) / 2;
194     ctx.quadraticCurveTo(body[s].x, body[s].y, xc, yc);
195   }
196   ctx.stroke();
197   
198   //Draw trailing circle
199   ctx.beginPath();
200   ctx.arc(xc, yc, line/2, 0, TWO_PI);
201   ctx.fill();
202 
203   window.requestAnimationFrame(draw);
204 }
205 window.requestAnimationFrame(draw);
206   </script>
207  </BODY>
208 </HTML>
自动画心线条（网页）

猜你喜欢
