您好,登錄后才能下訂單哦!
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset = utf-8"> </head> <script type="text/javascript" charset="utf-8"> 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); } </script> <body onload="pageLoaded();"> <canvas width="1200" height="480" id="testcanvas" > </canvas> </body> </html>
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。