pxloader加载图片的问题

时间:2013-10-25 13:14:51

标签: javascript html5 html5-canvas

大家好,

我尝试实施以下预加载器脚本Pxloader来加载我的图像文件。 但是,我似乎并不了解如何在pxloader脚本加载后访问图像。

这是我尝试做的一个例子。

 ...
....
<script type="text/javascript" src="js/PxLoader.js"></script>
<script type="text/javascript" src="js/PxLoaderImage.js"></script> 

<canvas id="mycanvas" width="768" height="780">
</canvas>   

<script type="text/javascript">

var loader = new PxLoader();

for(var i=0; i < 5; i++) { 
    var pxImage = new PxLoaderImage('images/alex'+i+'.jpg');
    pxImage.imageNumber = i + 1;
    loader.add(pxImage); 
}

loader.addProgressListener(function(e) { 
         document.getElementById("p1").innerHTML=" -> "+e.resource.imageNumber+" / "+ e.totalCount;
}); 


loader.addCompletionListener(function(e) { 
    var canvas = document.getElementById('sample1-canvas'), 
    ctx = canvas.getContext('2d'); 
        // THIS is where I want to draw one of the above pre-loaded images but I'm not sure how.. 
         ctx.drawImage( **image** , 0, 0);  
}); 

loader.start();

</script>

我真的很感激,如果有人可以给我一些指示,因为我无法通过自己解决这个问题:/ ..

提前致谢, 亚历

1 个答案:

答案 0 :(得分:1)

将新的5个新PxLoaderImage存储在数组或对象中。 在PxLoaderImage的.img属性中找到加载的图像。