RequestAnimationFrame在簡單的畫布中不起作用

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 個解決方案

解決方案1
2 已采納 2019-05-30 16:42:18

RequestAnimationFrame在簡單的畫布中不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2019-05-30 16:42:18

解決方案1
2 已采納 2019-05-30 16:42:18