HTML5 Canvas动画中的循环

Question

我正在使用Javascript编写HTML5 Canvas动画的代码。 我正在使用requestAnimFrame 。 动画效果很好。 但是当我在使用requestAnimFrame或setTimeout的函数中添加循环（for或while）时，动画不起作用。 添加循环对我来说很重要。 ANy建议做到这一点？

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"); 例如，要写入Chrome的JavaScript控制台或Firebug或类似内容。

对于正在运行的动画程序，调试输出将面临的一个问题是输出的screeds。 您可能只想在某些有趣的情况下登录，否则您将被淹没在流中。 数据的。