基于html5水波的加载特效

先来看效果　 图片2，利用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"
];

//要加载的图片。

 ltLoading(aImgArr)
            function ltLoading(arr) {
                var oC = document.createElement("canvas");
                if (!oC.getContext) {
                    return;
                }
                oC.width = 500;
                oC.height = 200;

                var cxt = oC.getContext("2d");
                cxt.beginPath();
                var x1 = 183, y1 = 34, x2 = 225, y2 = -2;//x1 = 183, y1 = 32, 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();　　　　　　　　　//以上代码是为了利用canvas生成一个曲线的图片（图片2）

                var canvas = document.createElement("canvas");
                var proc = document.createElement("div");//

                canvas.width = 140;
                canvas.height = 90;
                document.getElementById("linten_loading").appendChild(canvas);
                document.getElementById("linten_loading").appendChild(proc);
                var context = canvas.getContext("2d");
                var img1 = new Image();
                var img = new Image();
                var bg = null;
                var id = null;
                context.globalCompositeOperation = "destination-atop";//像素的合成。这是关键。
                img1.onload = function () {
                    img.onload = function () {
                        id = requestAnimFrame(render);
                    }
                    img.src = "lt_loading.png";
                };
                img1.src = oC.toDataURL();
                var initX = -320;//图像移动的最大距离
                var disX = initX;

                var len = aImgArr.length;
                var count = 0;
                var i = 0;
                loadimg();
                function loadimg() {
                    if (i === len) {
                        return;
                    }
                    var img = new Image();
                    img.onload = function () {
                        count++;
                        if (i < len - 1) {
                            i++;
                            loadimg(); //递归加载图片。
                        };
                    };
                    img.onerror = function () {
                        count++;
                        if (i < len - 1) {
                            i++;
                            loadimg();
                        };
                    }
                    img.src = aImgArr[i];
                }
                var i = 0;
                function render() {
                    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) {                            //图片加载完成，不再调用动画
                            cancelAnimationFrame(id);
                        }　　　　　　　　　　　　　　else{　　　　　　　　               //图片未加载完成。

　　　　　　　　　　　　　　　　　　id = requestAnimFrame(render);

　　　　　　　　　　　　　　}
                    }

                    proc.innerHTML = parseInt(count/len*100) + "%"; //计算得到加载的百分比
                    context.drawImage(img, 0, 0);

                }

                var requestAnimFrame = (function () { //用来做动画的。
                    return window.requestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame ||
                            function (callback) {
                                window.setTimeout(callback, 1000 / 60);
                            };
                })();

                window.cancelAnimationFrame = window[‘webkitCancelAnimationFrame‘] ||    // name has changed in Webkit
                        window[‘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>