0

全部，这里都是我的 html 代码，当我将它声明为单个数据时，它可以正常工作。但是当我将它声明为二维数组时。它不工作。有什么问题。谁能帮我。这是有错误的代码

<!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是因为循环结束后j变量评估为值。但是数组的长度是2。使用下一个代码作为示例来避免这个麻烦。3forvalue

<!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 回答