Loading effects based on HTML5 water waves

Let's take a look at the effect Picture 2, which is generated by canvas.

var Aimgarr = [
"Http://xinhuatone.com/zt/apecxjp/m/images/4.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/5.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/6.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/7.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/8.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/9.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/10.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/11.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/12.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/13.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/14.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/15.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/16.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/17.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/18.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/19.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/20.jpg",
"Http://xinhuatone.com/zt/apecxjp/m/images/21.jpg"
];

The picture to load.

ltloading (Aimgarr)functionltloading (arr) {varOC = document.createelement ("Canvas"); if(!oc.getcontext) {return; } oc.width= 500; Oc.height= 200; varCXT = Oc.getcontext ("2d");                Cxt.beginpath (); varX1 = 183, y1 = x2 = 225, y2 =-2;//x1 = 183, y1 = +, x2 = 225, y2 = 2;Cxt.moveto (0, 15); Cxt.beziercurveto (x1, y1, x2, y2, oc.width,27);// Cxt.lineto (Oc.width, oc.height); Cxt.lineto (0, Oc.height);                Cxt.closepath (); Cxt.fillstyle= "Rgba (149,30,35,1)"; Cxt.fill ();
The above code is used to create a curved picture with canvas (image 2)
                  varCanvas = document.createelement ("Canvas"); varproc = document.createelement ("div");//Canvas.width= 140; Canvas.height= 90; document.getElementById ("Linten_loading"). appendchild (canvas); document.getElementById ("Linten_loading"). appendchild (proc); varContext = Canvas.getcontext ("2d"); varIMG1 =NewImage (); varIMG =NewImage (); varBG =NULL; varID =NULL; Context.globalcompositeoperation= "Destination-atop";//the synthesis of pixels. This is the key. Img1.onload =function() {img.onload=function() {ID=Requestanimframe (render); } img.src= "Lt_loading.png";                }; IMG1.SRC=Oc.todataurl (); varINITX =-320;//maximum distance of image movementvarDISX =Initx; varLen =aimgarr.length; varCount = 0; vari = 0;                Loadimg (); functionloadimg () {if(i = = =Len) {                        return; }                    varIMG =NewImage (); Img.onload=function() {count++; if(I < len-1) {i++; Loadimg ();                        Loads the picture recursively.                    };                    }; Img.onerror=function() {count++; if(I < len-1) {i++;                        Loadimg ();                    }; } img.src=Aimgarr[i]; }                vari = 0; functionrender () {DISX+ = 4; if(Disx > 0) {Disx=Initx; } context.clearrect (0, 0, Canvas.width, canvas.height);                     if(Len > 0) {context.drawimage (IMG1, Disx, 70-90* (Count/len));//70-90* (Count/len)                        if(Count/len >= 1) {
Picture loading complete, no longer call animation Cancelanimationframe (ID); }
else{
The picture is not loaded complete. 

id = Requestanimframe (render);

}} proc.innerhtml= parseint (count/len*100) + "%";//Calculate the percentage loaded Context.drawimage (IMG,0, 0);                 }                varRequestanimframe = (function() {//used to make an animation.                     returnWindow.requestanimationframe | |Window.webkitrequestanimationframe||Window.mozrequestanimationframe||Window.orequestanimationframe||Window.msrequestanimationframe||function(callback) {Window.settimeout (callback,1000/60);                };                })(); Window.cancelanimationframe= window[' Webkitcancelanimationframe ' | |//name has changed in Webkitwindow[' Mozcancelrequestanimationframe ' | | window[' Cancelrequestanimationframe ' | | window[' Mscancelrequestanimationframe ']; if(!window.cancelanimationframe) {window.cancelanimationframe=function(ID) {cleartimeout (ID); }                }            }

<div id= "linten_loading" style= "border:1px solid red;width:200px;" >

</div>

Loading effects based on HTML5 water waves