RequestAnimationFrame не работает в простом холсте - PullRequest
0 голосов
/ 30 мая 2019

Вот простой код. Arc работает наверняка, но когда я пытаюсь поместить requestAnimationFrame в функцию, вся функция просто не работает.

Я ничего не делал, потому что я делаю это из курса холста Криса Курса. Точно такой же код, как и у него.

            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>

1 Ответ

2 голосов
/ 30 мая 2019

Вам необходимо вызвать функцию animate хотя бы один раз за пределами функции, чтобы инициализировать ее начало.Это может быть другая requestAnimationFrame(animate), animate() или функция автоматического вызова.

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

animate();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...