0

h すべて、ここにすべて私の html コードがあり、単一のデータとして宣言すると正常に動作します。しかし、それを2次元配列として宣言すると。動いていない。どうしたの。誰でも私を助けることができますか？ここにバグのあるコードがあります

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.onload=function()
            {
                var canvas=document.getElementById('mycanvas');
                var ctx=canvas.getContext('2d');
                var value=[[10,30,40,60,80],[10,20,30,40,50,90]];
                var width=50;
                var currx=30;

                var i = 0, j;
                for(j=0;j<=1;j++)
                {
                var interval = setInterval(function(){

                    if (i == value[j].length)
                    {
                        clearInterval(interval);
                        return;
                    }
                    var h=value[j][i];
                    ctx.fillStyle="grey";
                    ctx.fillRect(currx+2,canvas.height-h+1,width+2,h+2);
                    ctx.fillStyle="red";
                    ctx.fillRect(currx,canvas.height-h,width,h);                    
                    currx+=60;  
                    i++;
                }, 2000);
                }

            };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;">
    </body>
</html>
4

2 に答える 2

1

ここに変更されたコードがあります。試して..

<script type="text/javascript">
    window.onload=function()
    {
        var canvas=document.getElementById('mycanvas');
        var ctx=canvas.getContext('2d');
        var value=[[10,30,40,60,80],[10,20,30,40,50,90]];
        var width=50;
        var currx=30;
        var i = 0, j;
        for(j=0;j<=1;j++)
        {
        var interval = setInterval(function(){

            if (j == value[i].length)
            {
                clearInterval(interval);
                return;
            }

            var h = value[i][j];
            ctx.fillStyle="grey";
            ctx.fillRect(currx+2,canvas.height-h+1,width+2,h+2);
            ctx.fillStyle="red";
            ctx.fillRect(currx,canvas.height-h,width,h);                    
            currx+=60;  
            i++;
        }, 2000);
        }

    };
</script>
于 2012-07-20T11:06:55.447 に答える
0

ループ終了後に変数が値に評価されるvalue[j] is undefinedため、コード エラーが発生します。ただし、配列の長さは 2 です。次のコードを例として使用して、この問題を回避してください。j3forvalue

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
        window.onload=function() {
            var canvas=document.getElementById('mycanvas');
            var ctx=canvas.getContext('2d');
            var graphInfo=[{data:[10,30,40,60,80,10],color:'red'},{data:[10,20,30,40,50,90],color:'grey'}];
            var width=45;

            function getFunctionForTimeout(j){
                var i=0,currx=30,info=graphInfo[j],x5=j*5;
                var fTimeout=function(){
                    var h=Math.max(info.data[i]-x5,0);
                    ctx.fillStyle=info.color;
                    ctx.fillRect(currx+x5,canvas.height-h,width,h);                    
                    currx+=60;  
                    i++;
                    if(i<info.data.length)setTimeout(fTimeout,2000);
                };
                return fTimeout;
            }

            for(var j=graphInfo.length-1;j>=0;j--) {
                setTimeout(getFunctionForTimeout(j),2000);
            }
        };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;">
    </body>
</html>
于 2012-07-20T11:06:16.690 に答える