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张图的内容
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张图的内容