html5 image使用大全

发布时间：2020-06-06 06:29:13

来源：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(){//图片加载后调用的图片

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

}