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>