以下のコードは実行されません。これは次の行が原因だと思います。
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>