The "OPEN" particle aggregation of canvas essay

Implementation ideas:

1 Ensure that there is a certain number of particles on the screen, beyond a certain number, delete.

2 each particle produces its own target point, which is the pixel that makes up the letter, and the particle rushes to the target point during the movement.

3 How is the target point generated? First, the required letters are drawn under a "stealth" canvas, and then the coordinate points that make up the text are obtained based on the color of the text. Finally, these points are used as the target points for particle motion.

<! DOCTYPE html>window.onload=function(){            varGlobal ={cvs:NULL, CTX:NULL, Imgdata:NULL,//Get Lettersnum:0, Timer:NULL, goalpos:[], particals:[]};            Init (); functioninit () {Global.cvs= document.getElementById ("Grain_canvas"); if(Global.cvs = =NULL)                    return false; Global.cvs.width= 700; Global.cvs.height= 130; Global.cvs.style.background= "#000"; Global.ctx= Global.cvs.getContext (' 2d '); Global.num= 0;                    Drawletters ();                            Loop (); }                        //Draw a letter            functiondrawletters () {varCVS = document.createelement (' Canvas '); varCTX = Cvs.getcontext (' 2d '); Cvs.style.background= "Yellow"; Cvs.width= 800; Cvs.height= 40; Ctx.font= "20px Verdana"; Ctx.fillstyle= "Red"; Ctx.filltext ("OPEN Weblab", 0,25); //Document.body.appendChild (CVS);Global.imgdata = Ctx.getimagedata (0,0, Cvs.width,cvs.height); var_img =Global.imgData.data;  for(vari = 0, n = _img.length; I < n; i + = 8){                    if(_img[i + 0]! = 0 | | _img[i + 1]! = 0 | | _img[i + 2]! = 0){                        var_pos ={x: (i%cvs.width), Y: ((i/cvs.width)) |                         } ;                    Global.goalPos.push (_pos); }                }            }                        functionLoop () {Global.ctx.clearRect (0,0, Global.cvs.width,global.cvs.height); varPartical =NewParticle (math.random () * global.cvs.width, Math.random () *global.cvs.height);                Global.particals.push (partical);  for(vari = 0, len = global.particals.length; i < Len; i++){                    if(Global.particals[i].xpos! =global.goalpos[Global.particals[i].index].x|| Global.particals[i].ypos! =global.goalpos[global.particals[i].index].y) Global.particals[i].setpos ();                    Global.particals[i].draw (); }                if(Global.particals.length > 1500){                    DeleteGlobal.particals[0];                Global.particals.shift (); } global.num++; Global.timer= SetTimeout (function() {loop ();},10); if(Global.num >= 1400) {cleartimeout (Global.timer); Global.ctx.clearRect (0,0, Global.cvs.width,global.cvs.height);  for(vari = 0, len = global.goalPos.length; i < Len; i++){                        varPartical =Newparticle (global.goalpos[i].x, global.goalpos[i].y);                    Partical.draw (); }                }            }            //Particle class             functionparticle (XPos, yPos) { This. XPos =XPos;  This. YPos =YPos;  This. Index = Math.Round (Math.random () * global.goalPos.length * 1000)%global.goalPos.length; //Draw a particle                  This. Draw =function() {Global.ctx.fillStyle= "White";                     Global.ctx.beginPath (); Global.ctx.arc ( This. XPos, This. YPos, 2, 0, math.pi*2,true);                 Global.ctx.fill ();                 }; //Set particle coordinates                  This. SetPos =function(){                     varx = global.goalpos[ This. index].x, y = global.goalpos[ This. Index].y; if(X > This. XPos) This. XPos + = 2; Else  This. XPos-= 2;  This. YPos = ((y-ypos) * This. XPos + ((x * yPos)-(Y * xPos))/(X-XPos);              };    }        }; </script> </body>
The "OPEN" particle aggregation of canvas essay