Question

这是简单的代码。弧肯定可以工作，但是当我尝试将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>

Answer 1

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

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

animate();

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

1 个答案: