RequestAnimationFrame не работает на простом холсте

Вот простой код. 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.info('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

30.05.2019 18:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

103

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

animate();

«Вы также должны вызывать requestAnimationFrame в конце функции, а не в начале». Почему? Совершенно правильно называть это в начале, может быть даже лучше в очень редких случаях, когда это имеет значение (длинный кадр)

— 31.05.2019 01:15

Я думаю, это не имеет большого значения stackoverflow.com/questions/38229386/…

— 31.05.2019 01:57

30.05.2019 18:42