Как оживить холст с помощью js

Question

Я пытаюсь сделать анимацию, используя HTML-холст, но я не знаю, есть ли у меня лучший подход к этому.

Я пытаюсь создать <canvas id="canvas"></canvas> и нарисовать прямоугольник, используя fillRect().

Затем я выполняю функцию onload, время ожидания которой составляет 500 миллисекунд.

Функция в основном рисует прямоугольник на 1 пиксель туда, куда я хочу, изменяя его x или y, а затем, с помощью clearRect(), я создаю прямоугольник через некоторое время после начала в начальной точке и после другой.

Я правильно делаю? или есть лучший способ приблизиться к нему?

Answer 1

Вы можете использовать эту структуру

const canvas = document.getElementById('can');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.backgroundColor = 'white';

var someconstructorName = function(paramA,paramB,...){
    "Initialisation of variables and other things"   

    this.draw = function(){
        "your logic"
    }

    this.update = function(){
        "your update logic"
        this.draw();
    }
}

function animate(){
    requestAnimationFrame(animate)

}
animate();

Проверьте эту ручку здесь, она даст вам хорошую идею: https://codepen.io/khanChacha/pen/YgpBxM

Answer 2

Если вам нужно использовать этот стиль несколько раз, я рекомендую погрузиться в AnimeJS, библиотеку JS, которая значительно упрощает анимацию.^^

AnimeJS

Он также поддерживает задержки и временные шкалы, что, кажется, и используется сейчас ^^