标签：function firstActive 代码 length particles 爱心 var firstFree
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>
标签：function,firstActive,代码,length,particles,爱心,var,firstFree
From： https://www.cnblogs.com/zhang-dan/p/18360314