为什么这个变量超出范围？javascript_Javascript_Canvas_Kineticjs

为什么这个变量超出范围？javascript

javascript canvas

为什么这个变量超出范围？javascript,javascript,canvas,kineticjs,Javascript,Canvas,Kineticjs,下面的代码没有运行，我认为这是由于行： alert(nodes[i].getX()); 我认为节点[I]超出了范围？若然，原因为何（我已经注释掉了大部分代码来隔离问题。基本上，代码创建了10个圆，然后是10条曲线，然后用kineticjs在画布上为它们设置动画）谢谢守则： <html> <head> <style> body { margin: 0px;

下面的代码没有运行，我认为这是由于行：

alert(nodes[i].getX());

我认为节点[I]超出了范围？若然，原因为何

（我已经注释掉了大部分代码来隔离问题。基本上，代码创建了10个圆，然后是10条曲线，然后用kineticjs在画布上为它们设置动画）

谢谢

守则：

<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            canvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.7.js"></script>
        <script>
            window.onload = function() {

                // global parameters
                var curvatureX = 10;
                var curvatureY = 10;
                var nodeRadius = 10;

                var stage = new Kinetic.Stage({
                    container: "container",
                    width: 578,
                    height: 300
                });
                var layer = new Kinetic.Layer();


                var nodes = [];

                for (i = 0;i<10;i++){
                    nodes[i] = new Kinetic.Circle({
                        x: i*20,
                        y: i*5,
                        z:1,
                        radius: nodeRadius,
                        fill: "blue",
                        stroke: "black",
                        strokeWidth: 4
                    });
                    layer.add(nodes[i]);
                    alert(nodes[i].getX()); // *** THIS ALERT DOES SHOW UP***

                }


                var edges = [];
                for (i = 0;i<10;i++){

                    edges[i]= new Kinetic.Shape({
                        drawFunc: function() {
                            var context = this.getContext();
                            context.beginPath();

                            // ***WHERE THE PROBLEM IS ***     
                            alert(nodes[i].getX()); 
                            //ALERT DOES NOT SHOW UP + BLANK SCREEN

//                            context.moveTo(nodes[i].getX(), nodes[i].getY());
//                            if (nodes[i].getY()-nodes[i+1].getY()<0){
//                                context.quadraticCurveTo((nodes[i].getX()+nodes[i+1].getX()+curvatureX)/2, (nodes[i].getY()+nodes[i+1].getY()-curvatureY)/2, nodes[i+1].getX(), nodes[i+1].getY());
//                            }
//                            else{
//                                context.quadraticCurveTo((nodes[i].getX()+nodes[i+1].getX()+curvatureX)/2, (nodes[i].getY()+nodes[i+1].getY()+curvatureY)/2, nodes[i+1].getX(), nodes[i+1].getY());
//                            
//                            }
                            context.lineWidth = 10;
                            // line color
                            context.strokeStyle = "black";
                            context.stroke();
                        },
                        fill: "#00D2FF",
                        stroke: "black",
                        strokeWidth: 4
                    });
                    layer.add(edges[i]);
                }



                stage.add(layer);

                var amplitude_1 = 100;
                var amplitude_2 = 30;
                var period = 2000;
                // in ms
                var centerX = stage.getWidth() / 2;
                var centerY = stage.getHeight() / 2;

                stage.onFrame(function(frame) {
                    for (i=0;i<nodes.length;i++){
                        nodes[i].setX(amplitude_1 * i * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
                        nodes[i].setY(amplitude_2 * i+ 20);
                    }
                    layer.draw();

                });

                stage.start();
            };

        </script>
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>


身体{
边际：0px；
填充：0px；
}
帆布{
边框：1px实心#9C9898；
}
window.onload=函数（）{
//全局参数
var曲率=10；
var曲率=10；
var nodeRadius=10；
var阶段=新的动力学阶段({
容器：“容器”，
宽度：578，
身高：300
});
var layer=新的动能层（）；
var节点=[]；
对于（i=0；i它。使用a develop工具栏进行一些调试。
什么是“不运行”的意思？他已经老了，会干这种事还是什么？页面仍然空白（没有显示圆或曲线）。你试过调试代码吗？alert（nodes[i].getX（））；被注释掉。是的，但我没有得到任何线索（尽管我不是Firebug专家）