HTML5 Cool Text Rain effect _ simple to achieve __HTML5

@yuHG in learning H5, need to do a cool text effect, let me help, I also quickly learn HTML knowledge, write a demo.
First look at the effect:

Dynamic diagram, Source address: http://yunpan.cn/cFLDzQfk8yHi8 access password e8e6

The points of knowledge used

Canvas
<canvas> tags use scripts (usually JavaScript) to draw graphics (such as charts and other images).
<canvas> tag is just a graphics container, you must use a script to draw the graphic.

Window size
There are three ways to determine the size of the browser window (the viewport of the browser, excluding toolbars and scroll bars).
for Internet Explorer, Chrome, Firefox, Opera, and Safari: window.innerheight-The internal height of the browser window Window.innerwidth- The internal width of the browser window
for Internet Explorer 8, 7, 6, 5: document.documentElement.clientHeight document.documentElement.clientWidth
or document.body.clientHeight document.body.clientWidth.

Fill method:
FillStyle: Sets or returns the color, gradient, or pattern used to populate the painting.
FillRect: Draws a "filled" rectangle.
Filltext: Draws the filled text on the canvas.

Math Mathematics function
floor (x): Rounds down the X.
setinterval (): Invokes a function or evaluation expression in the specified period (in milliseconds). The method keeps calling the function until the clearinterval () is called or the window is closed. The ID value returned by this method can be used as an argument to the Clearinterval () method.
clearinterval (): Cancels the timeout set by SetInterval (). Specific code:

file: index.html

<! DOCTYPE html>
 
file: App.js

/** * Created by Steve on 2015/2/8.
* * var test = document.getElementById ("test");

var str = "STR";
var c = document.getElementById ("C");
var ctx = C.getcontext ("2d"); /** here controls the width and height of the display, and covers all browsers * * C.width = Window.innerwidth | | Document.documentElement.clientWidth | |
Document.body.clientWidth; C.height = Window.innerheight | | Document.documentElement.clientHeight | |
Document.body.clientHeight;
C.width = 300;

C.height = 300;
Ctx.fillstyle = "1cba9c";
Ctx.fillrect (0,0,100,100);
Ctx.fillstyle = "ecb69c";

Ctx.filltext ("Raindrops", 10,90);
var Chinese = "Cool Raindrops";

Chinese = chinese.split ("");
    var fsize = 20;

columns = c.width/fsize;
var drops=[];

for (Var x=0;x<columns;x++) {drops[x] = 0;}
    function Draw () {ctx.fillstyle= "Rgba (0,0,0,0.09)";

    Ctx.fillrect (0,0, C.width, c.height);
    Ctx.fillstyle= "#0f0";

    Ctx.font = fsize + "px Arial";//Arial is font. for (Var i=0;i<drops.length;i++) {var text = Chinese[math.floor (Math.random () *chinese.length)];

        Ctx.filltext (text,i*fsize,drops[i]*fsize);
        drops[i]++;
        if (Drops[i]*fsize > C.height && math.random () > 0.9) {drops[i] = 0;
    str = drops[i]+ ",";
} test.innertext = columns + ", I:" + str;//test Data}///draw (); var intervalid = setinterval (draw,50)//Here Modify control speed//test effect start/Pause function operateanimation (OBJBTN) {var operate = Docum

    Ent.getelementbyid ("operate");
        if (Objbtn.value = = "Start") {Objbtn.value = "paused";
    Intervalid = SetInterval (draw,30);
        }else{Objbtn.value = "Start";
    Clearinterval (Intervalid);
return false; }