html5 image使用大全

發(fā)布時(shí)間：2020-06-06 06:29:13

來(lái)源：51CTO

閱讀：768

作者：hello_world007

html>

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(){//圖片加載后調(diào)用的圖片

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');//得到繪圖環(huán)境??參數(shù)為繪圖環(huán)境的類型

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);

}

總結(jié)

以上是生活随笔為你收集整理的html5 image 同步,html5 image使用大全的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。