RequestAnimationFrame 在简单的画布中不起作用答案

【问题标题】：RequestAnimationFrame doesn't work in simple canvasRequestAnimationFrame 在简单的画布中不起作用
【发布时间】：2019-05-31 08:32:00
【问题描述】：

这是简单的代码。 Arc 确实可以工作，但是当我尝试将 requestAnimationFrame 放入函数中时，整个函数就不起作用了。

我什么也没做，因为我是在 Chris Courses 画布课程中做的。和他的代码一模一样。

            var canvas = document.querySelector('canvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            var ctx = canvas.getContext('2d');

            var x = 200;
            function animate(){
            requestAnimationFrame(animate);
            ctx.beginPath();
            ctx.arc(x, 200, 30, 0, Math.PI * 2, false);
            ctx.strokeStyle = 'blue';
            ctx.stroke();
            console.log('F');
            x =+ 1;
            }

<html>
    <head>
        <meta charset="utf-8"/>
        <style>
            *{
                padding:0;
                margin:0;
            }
            body{
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <canvas>

        </canvas>
        <script src="canvas.js"></script>
    </body>
</html>

【问题讨论】：

标签： javascript canvas

【解决方案1】：

您需要在函数外部至少调用一次animate 函数来初始化它的开头。这可以是另一个 requestAnimationFrame(animate)、animate() 或自调用函数。

function animate(){
  // The function body
  requestAnimationFrame(animate);
}

animate();

【讨论】：

"你还应该在函数的末尾而不是开始时调用 requestAnimationFrame。"为什么？在开始时调用它是完全正确的，在非常罕见的情况下甚至可能会更好（长帧）
我想这并不重要stackoverflow.com/questions/38229386/…