html - for ループで Kinetic.Shape を描画する - for ループの var i が drawFunc() で適切に取得されない

Question

カスタムでy値を設定するために作成されiたforループ（for(i=0; i<3; i++)）の変数を使用することは可能ですか？Kinetic.ShapedrawFunc();

動的形状を作成するための for ループの私のコードは次のようになります。

var layer = new Kinetic.Layer();

for (i = 0; i < 3; i++){
    layer.add(new Kinetic.Shape({
        x: 0,
        y: 0,
        width: 400,
        height: 400,
        drawFunc: function(canvas){
            console.log(i); //THIS LOG ALWAYS OUTPUTS THE MAX i-VALUE (here 3)
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.fillStyle = 'black';
            ctx.fillRect(10, i*30+2, 200, 30);
            ctx.closePath();
            ctx.fill();
        }
    }));
}

stage.add(layer);

iカスタムで値をログに記録するdrawFunc();と、結果は常に3の代わりに0, 1, 2なり、そのため、 は でctx.fillRect3 つすべての形状を描画しy = 92ます。

これは、説明された動作を備えた私のコードのフィドルです。

明らかな何かが欠けていますか？どんな助けでも大歓迎です。