我想在一个7*7的格子里随机显示8张图片,要怎么弄啊。。
<!DOCTYPE html>
<html>
<head><title>Game</title>
<script type="text/javascript" src="xxxx.js"></script>
<meta http-equiv="Cache-Control" content="no-cache"/>
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var x,y,i,j,k;
var a=Array("0001.png","0002.png","0003.png","0004.png","0005.png","0006.png","0007.png","0008.png");
var img=new Image();
for(k=0;k<8;k++){
img.src=a[k];
img.onload=function(){
i=Math.random()*7;
j=Math.random()*7;
x=114*i+21;
y=114*j+21;
alert(a[k]); //为什么a[k]值为undefined未定义??
context.drawImage(img,x,y);
}
}
}
[八张图片]
<!DOCTYPE html>
<html>
<head><title>Game</title>
<script type="text/javascript" src="xxxx.js"></script>
<meta http-equiv="Cache-Control" content="no-cache"/>
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var x,y,i,j,k;
var a=Array("0001.png","0002.png","0003.png","0004.png","0005.png","0006.png","0007.png","0008.png");
var img=new Image();
for(k=0;k<8;k++){
img.src=a[k];
img.onload=function(){
i=Math.random()*7;
j=Math.random()*7;
x=114*i+21;
y=114*j+21;
alert(a[k]); //为什么a[k]值为undefined未定义??
context.drawImage(img,x,y);
}
}
}
[八张图片]
var a = new Array("0001.png","0002.png","0003.png","0004.png","0005.png","0006.png","0007.png","0008.png");
直接Array()是调用函数的写法,Array()函数没有返回值,所以就undefind了
我怎么觉得是img.onload的问题,context.drawImage(img.x,y);会它加载完八张图之后才执行。function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var x,y,i,j,k,g;
var img=new Image();
var a=new Array();
var png=Array
("0001.png","0002.png","0003.png","0004.png","0005.png","0006.png","0007.png","0008.png");
for(g=0;g<8;g++){
a[g]=new Image();
a[g].src=png[g];
}
for(k=0;k<8;k++){
img=a[k];
i=Math.random()*7;
j=Math.random()*7;
x=114*parseInt(i)+21;
y=114*parseInt(j)+21;
context.drawImage(img,x,y);
}
}我去掉了onload可是又变成不刷新一下页面图片不显示了。
求解,怎么办 怎么办 怎么办
for(k=0;k<8;k++){
img.src=a[k];
把var img = new Image()放到for循环的里面吧。 for(k=0;k<8;k++){
var img=new Image();
img.src=a[k];
for(k=0;k<8;k++){
var img=new Image();
img.onload=function(){
i=Math.random()*7;
j=Math.random()*7;
x=114*i+21;
y=114*j+21;
alert(this.src); //为什么a[k]值为undefined未定义??
context.drawImage(this,x,y);
};
img.src=a[k];
}
1.由于闭包导致当onload执行时,alert(a[k]); //为什么a[k]值为undefined未定义??中的k等于8,a[8]必然为undefined
2.楼主使用了一个img变量来读取所有的图片,结果就是只有k=7时的那个onload事件会触发,前面几个都被覆盖掉了改成这样就可以了:function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var x,y,i,j,k;
var a=Array("0001.png","0002.png","0003.png","0004.png","0005.png","0006.png","0007.png","0008.png");
for(k=0;k<8;k++){
var img=new Image();
img.src=a[k];
var key=k;
img.onload=function(){
i=Math.random()*7;
j=Math.random()*7;
x=114*i+21;
y=114*j+21;
alert(a[k]); //为什么a[k]值为undefined未定义??
context.drawImage(img,x,y);
}
}
}