我想在一个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);
}
}
}
[八张图片]

解决方案 »

  1.   

    var a=Array应该是这样吧var a=new Array()或者直接var a=[];
      

  2.   

    Array可是个类哟,需要通过new来实例化的,如:
    var a = new Array("0001.png","0002.png","0003.png","0004.png","0005.png","0006.png","0007.png","0008.png");
      

  3.   

    必须new
    直接Array()是调用函数的写法,Array()函数没有返回值,所以就undefind了
      

  4.   

    var a=["0001.png","0002.png","0003.png","0004.png","0005.png","0006.png","0007.png","0008.png"];
      

  5.   


    我怎么觉得是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可是又变成不刷新一下页面图片不显示了。
    求解,怎么办 怎么办 怎么办
      

  6.   

    var img=new Image();
        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];
      

  7.   

     var a=["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.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];
    }
      

  8.   

    =.=这一片红星星亮瞎了我的眼典型的闭包问题,由于无意间形成闭包,导致这样的错误楼主的原始代码主要有这两个问题:
    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);
            }
        }
    }
      

  9.   

    至于前面说的Array必须new的不new也一样,可以去mozilla看js标准文档