为什么此变量超出范围?JavaScript

why is this variable out of scope? javascript

本文关键字：范围 JavaScript 变量为什么更新时间：2023-09-26

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

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>

它

显示了。使用开发工具栏执行一些调试。