1 <!DOCTYPE html>
2 <html>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4
5 <head>
6 <title>I love you</title>
7 </head>
8
9 <body> <canvas id="canvas"></canvas>
10 <style type="text/css">
11 body {
12 margin: 0;
13 padding: 0;
14 overflow: hidden;
15 }
16 </style>
17 <script type="text/javascript">
18 var canvas = document.getElementById('canvas');
19 var ctx = canvas.getContext('2d');
20
21
22 canvas.height = window.innerHeight;
23 canvas.width = window.innerWidth;
24
25 var texts = 'I LOVE U'.split('');
26
27 var fontSize = 16;
28 var columns = canvas.width / fontSize;
29 // 用于计算输出文字时坐标，所以长度即为列数
30 var drops = [];
31 //初始值
32 for (var x = 0; x < columns; x++) {
33 drops[x] = 1;
34 }
35
36 function draw() {
37 //让背景逐渐由透明到不透明
38 ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
39 ctx.fillRect(0, 0, canvas.width, canvas.height);
40 //文字颜色
41 ctx.fillStyle = '#f584b7';
42 ctx.font = fontSize + 'px arial';
43 //逐行输出文字
44 for (var i = 0; i < drops.length; i++) {
45 var text = texts[Math.floor(Math.random() * texts.length)];
46 ctx.fillText(text, i * fontSize, drops[i] * fontSize);
47
48 if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
49 drops[i] = 0;
50 }
51
52 drops[i]++;
53 }
54 }
55 setInterval(draw, 33);
56 </script>
57 </body>
58
59 </html>
60 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
61 <HTML>
62
63 <HEAD>
64 <TITLE> love</TITLE>
65 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
66 <META NAME="Generator" CONTENT="EditPlus">
67 <META NAME="Author" CONTENT="">
68 <META NAME="Keywords" CONTENT="">
69 <META NAME="Description" CONTENT="">
70 <meta charset="UTF-8">
71 <style>
72 html,
73 body {
74 height: 100%;
75 padding: 0;
76 margin: 0;
77 background: rgb(0, 0, 0);
78 }
79
80 canvas {
81 position: absolute;
82 width: 100%;
83 height: 100%;
84 }
85
86 #child {
87 position: fixed;
88 top: 50%;
89 left: 50%;
90 margin-top: -75px;
91 margin-left: -100px;
92
93 }
94
95 h4 {
96 font-family: "STKaiti";
97 font-size: 40px;
98 color: #f584b7;
99 position: relative;
100 top: -70px;
101 left: -65px;
102 }
103 </style>
104 </head>
105
106 <body>
107 <div id="child">
108 <h4>💗我永远为你着迷</h4>
109 </div>
110 <!--这里写名字❤！！！-->
111 <canvas id="pinkboard"></canvas>
112 <!-- <canvas id= "canvas"></canvas> -->
113 <script>
114 /*
115 * Settings
116 */
117 var settings = {
118 particles: {
119 length: 500, // maximum amount of particles
120 duration: 2, // particle duration in sec
121 velocity: 100, // particle velocity in pixels/sec
122 effect: -0.75, // play with this for a nice effect
123 size: 30, // particle size in pixels
124 },
125 };
126
127 /*
128 * RequestAnimationFrame polyfill by Erik Möller
129 */
130 (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }());
131
132 /*
133 * Point class
134 */
135 var Point = (function () {
136 function Point(x, y) {
137 this.x = (typeof x !== 'undefined') ? x : 0;
138 this.y = (typeof y !== 'undefined') ? y : 0;
139 }
140 Point.prototype.clone = function () {
141 return new Point(this.x, this.y);
142 };
143 Point.prototype.length = function (length) {
144 if (typeof length == 'undefined')
145 return Math.sqrt(this.x * this.x + this.y * this.y);
146 this.normalize();
147 this.x *= length;
148 this.y *= length;
149 return this;
150 };
151 Point.prototype.normalize = function () {
152 var length = this.length();
153 this.x /= length;
154 this.y /= length;
155 return this;
156 };
157 return Point;
158 })();
159
160 /*
161 * Particle class
162 */
163 var Particle = (function () {
164 function Particle() {
165 this.position = new Point();
166 this.velocity = new Point();
167 this.acceleration = new Point();
168 this.age = 0;
169 }
170 Particle.prototype.initialize = function (x, y, dx, dy) {
171 this.position.x = x;
172 this.position.y = y;
173 this.velocity.x = dx;
174 this.velocity.y = dy;
175 this.acceleration.x = dx * settings.particles.effect;
176 this.acceleration.y = dy * settings.particles.effect;
177 this.age = 0;
178 };
179 Particle.prototype.update = function (deltaTime) {
180 this.position.x += this.velocity.x * deltaTime;
181 this.position.y += this.velocity.y * deltaTime;
182 this.velocity.x += this.acceleration.x * deltaTime;
183 this.velocity.y += this.acceleration.y * deltaTime;
184 this.age += deltaTime;
185 };
186 Particle.prototype.draw = function (context, image) {
187 function ease(t) {
188 return (--t) * t * t + 1;
189 }
190 var size = image.width * ease(this.age / settings.particles.duration);
191 context.globalAlpha = 1 - this.age / settings.particles.duration;
192 context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
193 };
194 return Particle;
195 })();
196
197 /*
198 * ParticlePool class
199 */
200 var ParticlePool = (function () {
201 var particles,
202 firstActive = 0,
203 firstFree = 0,
204 duration = settings.particles.duration;
205
206 function ParticlePool(length) {
207 // create and populate particle pool
208 particles = new Array(length);
209 for (var i = 0; i < particles.length; i++)
210 particles[i] = new Particle();
211 }
212 ParticlePool.prototype.add = function (x, y, dx, dy) {
213 particles[firstFree].initialize(x, y, dx, dy);
214
215 // handle circular queue
216 firstFree++;
217 if (firstFree == particles.length) firstFree = 0;
218 if (firstActive == firstFree) firstActive++;
219 if (firstActive == particles.length) firstActive = 0;
220 };
221 ParticlePool.prototype.update = function (deltaTime) {
222 var i;
223
224 // update active particles
225 if (firstActive < firstFree) {
226 for (i = firstActive; i < firstFree; i++)
227 particles[i].update(deltaTime);
228 }
229 if (firstFree < firstActive) {
230 for (i = firstActive; i < particles.length; i++)
231 particles[i].update(deltaTime);
232 for (i = 0; i < firstFree; i++)
233 particles[i].update(deltaTime);
234 }
235
236 // remove inactive particles
237 while (particles[firstActive].age >= duration && firstActive != firstFree) {
238 firstActive++;
239 if (firstActive == particles.length) firstActive = 0;
240 }
241
242
243 };
244 ParticlePool.prototype.draw = function (context, image) {
245 // draw active particles
246 if (firstActive < firstFree) {
247 for (i = firstActive; i < firstFree; i++)
248 particles[i].draw(context, image);
249 }
250 if (firstFree < firstActive) {
251 for (i = firstActive; i < particles.length; i++)
252 particles[i].draw(context, image);
253 for (i = 0; i < firstFree; i++)
254 particles[i].draw(context, image);
255 }
256 };
257 return ParticlePool;
258 })();
259
260 /*
261 * Putting it all together
262 */
263 (function (canvas) {
264 var context = canvas.getContext('2d'),
265 particles = new ParticlePool(settings.particles.length),
266 particleRate = settings.particles.length / settings.particles.duration, // particles/sec
267 time;
268
269 // get point on heart with -PI <= t <= PI
270 function pointOnHeart(t) {
271 return new Point(
272 160 * Math.pow(Math.sin(t), 3),
273 130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
274 );
275 }
276
277 // creating the particle image using a dummy canvas
278 var image = (function () {
279 var canvas = document.createElement('canvas'),
280 context = canvas.getContext('2d');
281 canvas.width = settings.particles.size;
282 canvas.height = settings.particles.size;
283 // helper function to create the path
284 function to(t) {
285 var point = pointOnHeart(t);
286 point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
287 point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
288 return point;
289 }
290 // create the path
291 context.beginPath();
292 var t = -Math.PI;
293 var point = to(t);
294 context.moveTo(point.x, point.y);
295 while (t < Math.PI) {
296 t += 0.01; // baby steps!
297 point = to(t);
298 context.lineTo(point.x, point.y);
299 }
300 context.closePath();
301 // create the fill
302 context.fillStyle = '#ea80b0';
303 context.fill();
304 // create the image
305 var image = new Image();
306 image.src = canvas.toDataURL();
307 return image;
308 })();
309
310 // render that thing!
311 function render() {
312 // next animation frame
313 requestAnimationFrame(render);
314
315 // update time
316 var newTime = new Date().getTime() / 1000,
317 deltaTime = newTime - (time || newTime);
318 time = newTime;
319
320 // clear canvas
321 context.clearRect(0, 0, canvas.width, canvas.height);
322
323 // create new particles
324 var amount = particleRate * deltaTime;
325 for (var i = 0; i < amount; i++) {
326 var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
327 var dir = pos.clone().length(settings.particles.velocity);
328 particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
329 }
330
331 // update and draw particles
332 particles.update(deltaTime);
333 particles.draw(context, image);
334 }
335
336 // handle (re-)sizing of the canvas
337 function onResize() {
338 canvas.width = canvas.clientWidth;
339 canvas.height = canvas.clientHeight;
340 }
341 window.onresize = onResize;
342
343 // delay rendering bootstrap
344 setTimeout(function () {
345 onResize();
346 render();
347 }, 10);
348 })(document.getElementById('pinkboard'));
349
350
351
352
353 </script>
354
355 </BODY>
356 <!--
357 <audio controls>
358 <source src="Alan Walker-Faded.mp3" type="audio/ogg">
359 <source src="Alan Walker-Faded.mp3" type="audio/mpeg">
360 </audio >
361 -->
362
363
364 </HTML>
