html5image使用大全

    


    var p_w_picpathLoader = {
        loaded:true,
        loadedImages:0,
        totalImages:0,
        load:function(url){
            this.totalImages++;
            this.loaded = false;
            var p_w_picpath = new Image();
            p_w_picpath.src = url;
            p_w_picpath.onload = function(){//图片加载后调用的图片
                p_w_picpathLoader.loadedImages++;
                if(p_w_picpathLoader.loadedImages === p_w_picpathLoader.totalImages){
                    p_w_picpathLoader.loaded = true;
                }
            }
            return p_w_picpath;
        }
    };

    function pageLoaded(){
        var canvas = document.getElementById('testcanvas');//得到画布
        var context = canvas.getContext('2d');//得到绘图环境  参数为绘图环境的类型

        p_w_picpathLoader.loaded = false;
        var p_w_picpath_gx1 = p_w_picpathLoader.load('/testimg/gx/gx1.png');
        var p_w_picpath_gx2 = p_w_picpathLoader.load('/testimg/gx/gx2.jpg');
        var p_w_picpath_gx3 = p_w_picpathLoader.load('/testimg/gx/gx3.jpg');
        var p_w_picpath_gx4 = p_w_picpathLoader.load('/testimg/gx/gx4.jpg');



        var interHandler = setInterval(function () {
            if(p_w_picpathLoader.loaded){
                context.drawImage(p_w_picpath_gx1,0,0,100,100);
                context.drawImage(p_w_picpath_gx2,101,0,100,100);
                context.drawImage(p_w_picpath_gx3,201,0,100,100);
                context.drawImage(p_w_picpath_gx4,301,0,100,100);
                clearInterval(interHandler)
            }
        },50);
    }