js中的new Image()对象有这样的写法
var img = new Image();
img.src = 'xxx/xxx.png';
img.onload = function(){.........};
在function里写canvas绘图的代码就可以制作游戏的场景、人物、动画等
不过在做游戏的过程中所要用到的素材肯定不只一张图，那么在多张图同时加载时该怎么写呢
下面的写法是错的
var str = '1.png,2.png,3.png';
var src= str.split( str );
var img = new Array( src.length );
for( i = 0, i < src.length; i++ )
{
img[i] = new Image();
img[i].src = src[i];
img[i].onload = function(){ canvasContext2d.drawImage( img[i], 0, 0 ) };
}
为什么错呢，因为onload function是异步的，如果.src加载出现问题，没有在下一句drawImage之前加载完的话（这是必然的，不然也不用写onload function了）下标i就会乱掉
也就是说当onload function开始执行时，i基本上都只等于src.length;，于是所有的drawImage都会执行drawImage( img[src.length], 0, 0 ) 这句，由于 img[src.length]是undefined的，所以就会出错，当然如果你的 src.length足够大，也不是一定出错，但绘图错乱是必然的，比如在该绘第一张图的时候i已经跑到1000了，于是在绘第一张图的位置绘了第1000张图的内容