@willis.streich
Для создания анимации на Canvas нужно использовать API CanvasRenderingContext2D и методы requestAnimationFrame или setTimeout.
Пример анимации на Canvas:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const canvas = document.querySelector('canvas'); const context = canvas.getContext('2d'); let x = 0; let y = 0; function draw() { context.clearRect(0, 0, canvas.width, canvas.height); // рисуем на холсте с помощью методов CanvasRenderingContext2D context.beginPath(); context.arc(x, y, 20, 0, 2 * Math.PI); context.fillStyle = 'red'; context.fill(); // изменяем координаты фигуры x += 2; y += 1; // запускаем следующий кадр анимации requestAnimationFrame(draw); } // запускаем анимацию requestAnimationFrame(draw); |
В данном примере мы создаем круг на Canvas и каждый кадр изменяем его координаты, чтобы сделать движение. Метод requestAnimationFrame запускает следующий кадр анимации автоматически.