Canvas particle text gradually fades out

I have always wanted to do a text particle effect fade out fade in, the two days to write the code, the effect address: http://www.mjix.com/code/canvas-text/, press F11 to enter the full screen, do screen saver can also, preview the figure

 

It mainly deals with the displacement of particles (Text pixels. You need to first obtain the initial position of the pixel to be extremely transparent before entering the light. This stuff applies to the conversion problem on the left side of the mathematics. If you want to get a little math, skip it. I want to learn math/sneer.

1 // obtain the pixel position before the progressive step 2 getindata: function (data, Min, offset) {3 var xs = [], 4 ys = []; 5 this. each (data, function (Info, index) {6 Xs. push (info [0]); 7 Ys. push (info [1]); 8}); 9 10 var max = math. max. apply (XS, XS), 11 mix = math. min. apply (XS, XS), 12 May = math. max. apply (ys, ys), 13 miy = math. min. apply (ys, ys), 14 // find the approximate center point 15 midx = (MAX + mix)/2, 16 midy = (May + miy)/2; 17 18 var self = This, 19 Dis = Len = 21 prop = 22 newdata = []; 23 This. each (data, function (Info, index) {24 ALB =-self. random (0.1, 1); 25 Len = min + self. random (offset); 26 Dis = math. SQRT (self. getdistance (Info, [midx, midy]); 27 28 prop = Len/(DIS + Len); 29 newdata. push ([]); 30 var xy = math. ceil (info [0]-prop * midx)/(1-prop); 31 newdata [Index] [0] = xy; 32 xy = math. ceil (info [1]-prop * midy)/(1-prop); 33 newdata [Index] [1] = xy; 34 newdata [Index] [2] = info [2]. concat (); 35 newdata [Index] [2] [3] = phosphatase; 36}); 37 return newdata; 38 },

 

The next step is to update the position of the pixel. The method is to randomly set a forward length and determine the position of the next moving target point based on the current point and the target point and the movement length.

1 // obtain the target point location of the specified length point 2 getdestdot: function (data1, data2, length) {3 if (data2 [1] = data1 [1] & data2 [0] = data1 [0]) {4 return data2; 5} 6 7 var xdis = math. SQRT (this. getdistance (data1, data2), 8 prop = length/xdis; 9 10 x = math. ceil (prop * (data2 [0]-data1 [0]) + data1 [0]; 11 y = math. ceil (prop * (data2 [1]-data1 [1]) + data1 [1]; 12 return [x, y]; 13 },

 

After all the pixels are reset, set the delay and fade out again. If it fades out, I will handle it. The meaning and effect will be shown by myself, and the source code will not be mentioned. As with all codes, there may be various compatibility, bugs, and other unpredictable issues. Leave a message for feedback.

How can I check whether the font is loaded?

Canvas particle text gradually fades out