Canvas не может получить доступ к переменной в цикле for - PullRequest
Новая
       28

Canvas не может получить доступ к переменной в цикле for

0 голосов
/ 28 октября 2019

Я экспериментирую с HTML5 Canvas и сталкиваюсь с очень странным поведением. Я пишу цикл анимации и обнаруживаю, что Canvas не будет рисовать, если я непосредственно передаю ему значение i в цикле for внутри функции анимации.

Код настройки: 

    // This method is part of my custom class for accessing the canvas
    drawLineFrom(source = [this.center.x, this.center.y], target, style) {
        this.context.strokeStyle = style || '#FFFFFF';
        this.context.moveTo(source[0], source[1]);
        this.context.lineTo(target[0], target[1]);
        this.context.stroke();
    }

function init() {
    animLoop = setInterval(animateDragon, ANIM_RATE);
}

Код анимации:

Эта функция ничего не рисует: 

function animateDragon() {
    for (let i = 0; i < dragon.length - 1; i += 2) {
        canvas.drawLineFrom(dragon[i], dragon[i + 1], '#FFFFFFF');
    }
}

Но эта функция работает так, как я ожидал: 

function animateDragon() {
    for (let i = 0; i < dragon.length - 1; i += 2) {
        let j = i;
        canvas.drawLineFrom(dragon[j], dragon[j + 1], '#FFFFFF');
    }
}

Я не могу понять, почему i имеет неправильную область видимости, чтобы контекст холста мог ее нарисовать. Кажется, что все функции внутри animateDragon синхронны. Консоль, записывающая значения в методе drawLineFrom, показывает, что оно ссылается на правильное значение. И поскольку i является примитивом, не передается ли оно по значению, а не по ссылке? Так почему присвоение j значению i что-то меняет?

РЕДАКТИРОВАТЬ: я также не могу получить последовательное поведение на этом, я могу воспроизвести его локально, но не надежно в JSFiddle - иногда этоработает просто отлично. Скрипка из одного из приведенных ниже комментариев почти такая же, как у меня, и, похоже, она работает, как и ожидалось.

...