<!DOCTYPEhtml><html><head><metahttp-equiv="Content-type"content="text/html;charset=utf-8"></head><scripttype="text/javascript"charset="utf-8">varp_w_picpathLoader={loaded:true,loadedImages:0,totalImages:0,load:function(url){this.totalImages++;this.loaded=false;varp_w_picpath=newImage();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;}}returnp_w_picpath;}};functionpageLoaded(){varcanvas=document.getElementById('testcanvas');//得到画布varcontext=canvas.getContext('2d');//得到绘图环境参数为绘图环境的类型p_w_picpathLoader.loaded=false;varp_w_picpath_gx1=p_w_picpathLoader.load('/testimg/gx/gx1.png');varp_w_picpath_gx2=p_w_picpathLoader.load('/testimg/gx/gx2.jpg');varp_w_picpath_gx3=p_w_picpathLoader.load('/testimg/gx/gx3.jpg');varp_w_picpath_gx4=p_w_picpathLoader.load('/testimg/gx/gx4.jpg');varinterHandler=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);}</script><bodyonload="pageLoaded();"><canvaswidth="1200"height="480"id="testcanvas"></canvas></body></html>