POJ2236 Wireless Network "and check the water problem"

Front-end development whqet,csdn, Wang Haiqing, Whqet, front-end development experts

Today is a good day, May 20, 2014, the best time to vindicate, although the child has been four years old, married has been five years, but also can not be lazy, so have this effect.

Online research point here, download the collection here. Program Ape and Cheng, boldly show your love.

Using HTML5 canvas to achieve dynamic text particle effect, the effect is as follows.

OK, just look at the principle, first we need to implement the stroke text inside the canvas, and then use Getimagedata to get the pixel matrix of the stroke text, bind the particle effect to the stroke article.

The whole effect is as follows.

HTML files are very simple.

<canvas id= "Canvas" width= "height=" ></canvas>

The CSS file is as follows.

Body {background: #000; text-align:center;font-family: "Simhei"}canvas {margin:auto;position:absolute;left:0;right : 0;top:0;bottom:0;}

JS files are critical.

 BLUR = false; Pulsation = true; Pulsation_period = 1000; Particle_radius = 1; /* Disable blur before using blink */blink = false; Global_pulsation = false; quality = 2;   /* 0-5 */* Set False if you prefer rectangles */arc = true; /* trembling + blur = fun */trembling = 0; /* 0-infinity */Fancy_font = "Arial"; BACKGROUND = "#000"; BLENDING = true; /* If empty the text would be a random number */var text;num = 0; Textarray = ["Whq", "Love", "Xcl", "ever"]; Quality_to_font_size = [10, 12, 30, 50, 200, 350]; Quality_to_scale = [20, 6, 4, 1, 0.9, 0.5]; Quality_to_text_pos = [Ten, +, +, a, 280];window.onload = function () {Document.body.style.backgroundColor = BA     Ckground;    var canvas = document.getElementById ("Canvas");     var ctx = Canvas.getcontext ("2d");    var W = canvas.width;     var H = canvas.height;    var Tcanvas = document.createelement ("Canvas");    var tctx = Tcanvas.getcontext ("2d");    Tcanvas.width = W;     Tcanvas.height = H;    Total_area = W * H; Total_particles = 1000;    Single_particle_area = Total_area/total_particles;         Area_length = Math.sqrt (Single_particle_area);    var particles = [];    for (var i = 1; I <= total_particles; i++) {Particles.push (new particle (i));        } function particle (i) {THIS.R = Math.Round (Math.random () * 255 | 0);        THIS.G = Math.Round (Math.random () * 255 | 0);        this.b = Math.Round (Math.random () * 255 | 0);         This.alpha = 1;        This.x = (i * area_length)% W;         This.y = (i * area_length)/W * AREA_LENGTH; /* Randomize delta to make particles sparkling */This.deltaoffset = Math.random () * pulsation_period |         0;    This.radius = 0.1 + math.random () * 2;         } var positions = [];function new_positions () {TEXT = Textarray[num];        if (num < textarray.length-1) {num++;        } else {num = 0;         }//alert (TEXT);        Tctx.fillstyle = "White"; Tctx.fillrect (0, 0, W,H) Tctx.fill ();                 Tctx.font = "bold" + quality_to_font_size[quality] + "px" + fancy_font;        Tctx.strokestyle = "BLACK";        Tctx.fillstyle= "#f00";        Tctx.stroketext (text,30, 50);         Tctx.filltext (text,30, 50);        Image_data = tctx.getimagedata (0, 0, W, H);        pixels = image_data.data;        positions = [];                    for (var i = 0; i < pixels.length; i = i + 2) {if (pixels[i]! = 255) {position = { x: (i/2% W | 0) * Quality_to_scale[quality] | 0, Y: (I/2/W | 0) * Quality_to_scale[quality] |            0} positions.push (position);    }} get_destinations ();         } function Draw () {var now = Date.now ();         Ctx.globalcompositeoperation = "Source-over";        if (BLUR) Ctx.globalalpha = 0.1; else if (! BLUR &&!         BLINK) Ctx.globalalpha = 1.0;        Ctx.fillstyle = BACKGROUND; Ctx.fillreCT (0, 0, W, H) if (BLENDING) ctx.globalcompositeoperation = "Lighter";            for (var i = 0; i < particles.length; i++) {p = particles[i];            if (IsNaN (p.x)) continue Ctx.beginpath ();            Ctx.fillstyle = "RGB (" + P.R + "," + P.G + "," + p.b + ")";             Ctx.fillstyle = "Rgba (" + P.R + "," + P.G + "," + p.b + "," + P.alpha + ")";             if (BLINK) Ctx.globalalpha = Math.sin (Math.PI * mod * 1.0); if (pulsation) {/* This would is 0-1 */var mod = ((global_pulsation? 0:p.deltaoffset) + now)% P                Ulsation_period/pulsation_period;            MoD = Math.sin (mod * math.pi);             } else var mod = 1; var offset = TREMBLING?             TREMBLING * ( -1 + math.random () * 2): 0;             var radius = Particle_radius * P.radius; if (!                 ARC) {ctx.fillrect (offset + p.x-mod * radius/2 | 0, offset + p.y-mod * radius/2 | 0, RADIUS * mod,    RADIUS * MoD);                } else {Ctx.arc (offset + p.x | 0, offset + p.y | 0, RADIUS * mod, Math.PI * 2, false);            Ctx.fill ();            } p.x + = (p.dx-p.x)/10;        P.y + = (p.dy-p.y)/10; }} function Get_destinations () {for (var i = 0; i < particles.length; i++) {pa = particles[            I];            Particles[i].alpha = 1;            var distance = [];            nearest_position = 0; if (positions.length) {for (var n = 0; n < positions.length; n++) {po = positions[n                    ];                    Distance[n] = math.sqrt ((pa.x-po.x) * (pa.x-po.x) + (PA.Y-PO.Y) * (PA.Y-PO.Y)); if (n > 0) {if (Distance[n] <= distance[nearest_position]) {near                        Est_position = n; }}} PARTICLES[I].DX = Positions[nearest_position].x;                Particles[i].dy = POSITIONS[NEAREST_POSITION].Y;                 Particles[i].distance = Distance[nearest_position];                var PO1 = positions[nearest_position];                    for (var n = 0; n < positions.length; n++) {var po2 = positions[n];                    Distance = Math.sqrt ((po1.x-po2.x) * (po1.x-po2.x) + (PO1.Y-PO2.Y) * (PO1.Y-PO2.Y));                    if (distance <= 5) {Positions.splice (n, 1);            }}}} else {//particles[i].alpha = 0;        }}} function init () {new_positions ();        SetInterval (draw, 30);    SetInterval (New_positions, 2000); } init ();};

----------------------------------------------------------

- --------------------------------------------------------------------------------------------------------