Несколько объектов на HTML5 CANVAS, рисуется только первый элемент

Question

Пожалуйста, учтите такой код, функция draw() вызывается в каждом цикле анимации, где стадия очищается и градиент применяется к фону, а x, y изменяются для фигур:

draw = function() {
    for ( i = 0; i < shapes.length; i++ )
    {
        draw_sample_shape(i);
        draw_coords(i);
    }
}

draw_sample_shape = function(shape) {
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(shapes[shape].x, shapes[shape].y, 240, 0, Math.PI*2, false);
    ctx.closePath();
    ctx.fill();
}

draw_coords(shape) {
    coords = shapes[shape].coords;
    ctx.globalCompositeOperation = "destination-out";
    ctx.beginPath();
    ctx.moveTo(coords[0].x, coords[0].y);
    for ( i = 1; i < coords.length; i++ )
    {
        if (coords[i].y == 'X' && coords[i].x == 'X')
        {
            ctx.closePath();
            ctx.fill();
            ctx.moveTo(0, 0);
            ctx.beginPath();
            if (typeof(coords[i+1]) != 'undefined')
            {
                ctx.moveTo( (coords[i+1].x), (coords[i+1].y) );
            }
        }
        else
        {
            ctx.lineTo((coords[i].x), (coords[i].y));
        }
    }
    ctx.closePath();
    ctx.fill();
}

Теперь всеработает отлично, если я не вызову draw_coords() в моей функции draw() - проблема в том, что она рисует и анимирует только первую фигуру, а остальные пропускает.Когда я пропускаю этот вызов, он работает хорошо.

Я использую координаты [X, X] для сброса чертежа и запуска следующей фигуры.Может кто-нибудь сказать мне, что с этим не так?и почему, когда я рисую эти координаты, он рисует их только на первом элементе?

Answer 1

Я думаю, я знаю, почему у вас проблемы. Вот эта строка:

for ( i = 0; i < shapes.length; i++ )

Вы говорите i = 0 вместо var i = 0.

Это означает, что i является глобальным.

Это означает, что i в draw_coords фактически забивает вашу i в draw()!

Итак, вы начинаете с первого объекта в draw() с i, равным 0, затем вы входите в draw_coords, и он принимает ту же самую переменную i и увеличивает ее до чего-то большого, например 10. Затем, когда первый draw_coords завершен, он возвращается к рисованию и видит, меньше ли i, который сейчас равен 10, чем shape.length (что может быть чем-то вроде 6). Это не меньше, поэтому цикл for в draw считает себя выполненным!

Вы определенно не хотите этого, поэтому поменяйте оба цикла for на var:

for (var i = 0;

И проблема, с которой вы здесь столкнулись, исчезнет.