javascript - While 循环与 requestAnimationFrame

Question

我正在尝试使用 JavaScript 在 HTML5 Canvas 上绘制时间线。我从 while 循环 开始，但它似乎在 requestAnimationFrame 函数中出现故障。

if 语句工作正常，但我想知道为什么 while 循环和 requestAnimationFrame 函数不能一起工作。

此代码有效

var x = 50
function animate(){
    requestAnimationFrame(animate);
    c.beginPath();
    c.moveTo(50, halfway_y)
    c.lineTo(x, halfway_y)
    c.strokeStyle = "white"
    c.lineWidth = 5;
    c.stroke();
    if(x < canvas.width - 50){
        x+=7
    }

}

animate()

此代码不起作用。代码只是画线，没有动画。

var x = 50
function animate(){
    requestAnimationFrame(animate);
    c.beginPath();
    c.moveTo(50, halfway_y)
    c.lineTo(x, halfway_y)
    c.strokeStyle = "white"
    c.lineWidth = 5;
    c.stroke();

    while(x < canvas.width){
        x+=7
    }


}

animate()

Answer 1

 while(x < canvas.width) {
      x+=7
 }

---

 if(x < canvas.width - 50) {
     x+=7
 }

这两个代码块是不同的，while block 让x一次到canvas.width，if block 让 x 只增加 7。

x = 0
while(x < canvas.width){
     x+=7
}
console.log(x);// x = 999

---

x = 0
if(x < canvas.width - 50){
     x+=7
}
console.log(x); // x = 7