Циклы в HTML5 Canvas Animations

Question

Я пишу код для анимации HTML5 Canvas с использованием Javascript. я использую requestAnimFrame для этого. Анимация работает отлично для точки. Но когда я добавляю цикл (для или во время) в функцию, которая использует requestAnimFrame или же setTimeoutанимация не работает. Для меня важно добавить цикл. Любые предложения, чтобы сделать это возможным?

function animate(lastTime) {
            var date = new Date();
            var time = date.getTime();
            var timeDiff = time - lastTime;
            var linearSpeed = 100;
            var linearDistEachFrame = linearSpeed * timeDiff / 1000;
            var currentX = LINE.x;              
            var currentY = LINE.y;
                var newY = currentY + linearDistEachFrame;
                var newX = currentX + linearDistEachFrame;
                context.beginPath();
                context.moveTo(LINE.x, LINE.y);
                lastTime = time;

                var Xindex=LINE.arrayX.indexOf(newX);

                //here am getting error..if i replace this with 'if' its working fine..and even if there is not a single LOC it doesnt work
                 while(Xindex!=-1) {
                                        //processes the loop
                 }

                context.lineTo(LINE.x, LINE.y);
                context.fillStyle = "red";
                context.fill();
                context.lineWidth = LINE.borderWidth;
                context.strokeStyle = "red";
                context.stroke();
            // request new frame

            requestAnimFrame(function() {
                animate(lastTime);
            });
        }

Answer 1

Попробуйте добавить break Заявление в цикле и посмотреть, если это исправить. Если это так, это означает, что условие было выполнено, и код будет застрять в цикле навсегда, если вы не прекратите работу или не измените Xindex на -1.

Вы должны точно определить, где происходит сбой кода. Один из способов сделать это - распечатать операторы отладки в ключевых частях кода, чтобы вы точно знали, как они выполнялись, и каково значение важных переменных.

Ты можешь использовать console.log("test"); например, для записи в консоль JavaScript Chrome, или Firebug, или тому подобное.

Одна проблема, с которой вы столкнетесь при выводе отладочной информации для работающей анимационной программы, - это стяжки вывода. Возможно, вы захотите войти только в определенных интересных обстоятельствах, или вы будете тонуть в потоке. Данных.