Question

我正在尝试使用JavaScript在HTML5画布上绘制时间线。我从while loop开始，但似乎在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块使x到canvas.width一次，if块使x仅增加{{1} }。

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

While循环与requestAnimtionFrame

1 个答案: