1 <script>
2 var canvas = document.getElementById("canvas");
3 //canvas 的大小
4 canvas.width = 900;
5 canvas.height = 150;
6 var ctx = canvas.getContext('2d');
7 var img;
8 var mouseX = null, mouseY = null;
9 var mouseRadius = 50; //power：大小1-100
10 var RAF = (function () {
11 return window.requestAnimationFrame ||
12 window.webkitRequestAnimationFrame ||
13 window.mozRequestAnimationFrame ||
14 window.oRequestAnimationFrame ||
15 window.msRequestAnimationFrame ||
16 function (callback) {
17 window.setTimeout(callback, 1000 / 60);
18 };
19 })();
20 Array.prototype.forEach = function (callback) {
21 for (var i = 0; i < this.length; i++) {
22 callback.call((typeof this[i] === "object") ? this[i] : window, i, this[i]);
23 }
24 };
25 window.onmousemove = function (e) {
26 if (e.target.tagName === "CANVAS") {
27 mouseX = e.clientX - e.target.getBoundingClientRect().left;
28 mouseY = e.clientY - e.target.getBoundingClientRect().top;
29 } else {
30 mouseX = null;
31 mouseY = null;
32 }
33 };
34 var particleArray = [];
35 var animateArray = [];
36 var particleSize_x = 1;
37 var particleSize_y = 2;
38 var canvasHandle = {
39 init: function () {
40 this._reset();
41 this._initImageData();
42 this._execAnimate();
43 },
44 _reset: function () {
45 particleArray.length = 0;
46 animateArray.length = 0;
47 this.ite = 100;
48 this.start = 0;
49 this.end = this.start + this.ite;
50 },
51 _initImageData: function () {
52 this.imgx = (canvas.width - img.width) / 2;
53 this.imgy = (canvas.height - img.height) / 2;
54 ctx.clearRect(0, 0, canvas.width, canvas.height);
55 ctx.drawImage(img, this.imgx, this.imgy, img.width, img.height);
56 var imgData = ctx.getImageData(this.imgx, this.imgy, img.width, img.height);
57 for (var x = 0; x < img.width; x += particleSize_x) {
58 for (var y = 0; y < img.height; y += particleSize_y) {
59 var i = (y * imgData.width + x) * 4;
60 if (imgData.data[i + 3] >= 125) {
61 var color = "rgba(" +
62 imgData.data[i] +
63 "," +
64 imgData.data[i + 1] +
65 "," +
66 imgData.data[i + 2] +
67 "," +
68 imgData.data[i + 3] +
69 ")";
70 var xRandom = x + Math.random() * 20,
71 vx = -Math.random() * 200 + 400,
72 yRandom = img.height / 2 - Math.random() * 40 + 20,
73 vy;
74
75 if (yRandom < this.imgy + img.height / 2) {
76 vy = Math.random() * 300;
77 } else {
78 vy = -Math.random() * 300;
79 }
80 particleArray.push(
81 new Particle(
82 xRandom + this.imgx,
83 yRandom + this.imgy,
84 x + this.imgx,
85 y + this.imgy,
86 vx,
87 vy,
88 color
89 )
90 );
91 particleArray[particleArray.length - 1].drawSelf();
92 }
93 }
94 }
95 },
96 _execAnimate: function () {
97 var that = this;
98 particleArray.sort(function (a, b) {
99 return a.ex - b.ex;
100 });
101 if (!this.isInit) {
102 this.isInit = true;
103 animate(function (tickTime) {
104 if (animateArray.length < particleArray.length) {
105 if (that.end > (particleArray.length - 1)) {
106 that.end = (particleArray.length - 1);
107 }
108 animateArray = animateArray.concat(particleArray.slice(that.start, that.end));
109 that.start += that.ite;
110 that.end += that.ite;
111 }
112 animateArray.forEach(function () {
113 this.update(tickTime);
114 });
115 });
116 }
117 }
118 };
119 var tickTime = 16;
120 function animate(tick) {
121 if (typeof tick == "function") {
122 var tickTime = 16;
123 ctx.clearRect(0, 0, canvas.width, canvas.height);
124 tick(tickTime);
125 RAF(function () {
126 animate(tick);
127 });
128 }
129 }
130 function Particle(x, y, ex, ey, vx, vy, color) {
131 this.x = x;
132 this.y = y;
133 this.ex = ex;
134 this.ey = ey;
135 this.vx = vx;
136 this.vy = vy;
137 this.a = 1500;
138 this.color = color;
139 this.width = particleSize_x;
140 this.height = particleSize_y;
141 this.stop = false;
142 this.static = false;
143 this.maxCheckTimes = 10;
144 this.checkLength = 5;
145 this.checkTimes = 0;
146 }
147 var oldColor = "";
148 Particle.prototype = {
149 constructor: Particle,
150 drawSelf: function () {
151 if (oldColor !== this.color) {
152 ctx.fillStyle = this.color;
153 oldColor = this.color;
154 }
155 ctx.fillRect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);
156 },
157 move: function (tickTime) {
158 if (this.stop) {
159 this.x = this.ex;
160 this.y = this.ey;
161 } else {
162 tickTime = tickTime / 1000;
163 var cx = this.ex - this.x;
164 var cy = this.ey - this.y;
165 var angle = Math.atan(cy / cx);
166 var ax = Math.abs(this.a * Math.cos(angle));
167 ax = this.x > this.ex ? -ax : ax;
168 var ay = Math.abs(this.a * Math.sin(angle));
169 ay = this.y > this.ey ? -ay : ay;
170 this.vx += ax * tickTime;
171 this.vy += ay * tickTime;
172 this.vx *= 0.95;
173 this.vy *= 0.95;
174 this.x += this.vx * tickTime;
175 this.y += this.vy * tickTime;
176 if (Math.abs(this.x - this.ex) <= this.checkLength && Math.abs(this.y - this.ey) <= this.checkLength) {
177 this.checkTimes++;
178 if (this.checkTimes >= this.maxCheckTimes) {
179 this.stop = true;
180 }
181 } else {
182 this.checkTimes = 0;
183 }
184 }
185 },
186 update: function (tickTime) {
187 this.move(tickTime);
188 this.drawSelf();
189 this._checkMouse();
190 },
191 _checkMouse: function () {
192 var that = this;
193 if (!mouseX) {
194 goback();
195 return;
196 }
197 var distance = Math.sqrt(Math.pow(mouseX - this.x, 2) + Math.pow(mouseY - this.y, 2));
198 var angle = Math.atan((mouseY - this.y) / (mouseX - this.x));
199 if (distance < mouseRadius) {
200 this.stop = false;
201 this.checkTimes = 0;
202 if (!this.recordX) {
203 this.recordX = this.ex;
204 this.recordY = this.ey;
205 }
206 this.a = 2000 + 1000 * (1 - distance / mouseRadius);
207 var xc = Math.abs((mouseRadius - distance) * Math.cos(angle));
208 var yc = Math.abs((mouseRadius - distance) * Math.sin(angle));
209 xc = mouseX > this.x ? -xc : xc;
210 yc = mouseY > this.y ? -yc : yc;
211 this.ex = this.x + xc;
212 this.ey = this.y + yc;
213 } else {
214 goback();
215 }
216 function goback() {
217 if (that.recordX) {
218 that.stop = false;
219 that.checkTimes = 0;
220 that.a = 1500;
221 that.ex = that.recordX;
222 that.ey = that.recordY;
223 that.recordX = null;
224 that.recordY = null;
225 }
226 }
227 }
228 };
229 //use image
230 function useImage() {
231 img = document.getElementById("logo");
232 if (img.complete) {
233 canvasHandle.init();
234 } else {
235 img.onload = function () {
236 canvasHandle.init();
237 };
238 }
239 }
240 //use text
241 function useText() {
242 img = document.createElement('canvas');
243 img.width = 720;
244 img.height = 60;
245 var imgctx = img.getContext("2d");
246 imgctx.textAlign = "center";
247 imgctx.textBaseline = "middle";
248 imgctx.font = "48px 华文行楷";
249 imgctx.fillText('千江有水千江月，万里无云万里天', img.width / 2, img.height / 2);
250 canvasHandle.init();
251 }
252 useText();
253 </script>
浙公网安备 33010602011771号