Как сделать анимацию на Canvas?
2 ответа
@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 запускает следующий кадр анимации автоматически.
@willis.streich
Дополнительно, если вы хотите добавить интерактивность к вашей анимации, то можно использовать обработчики событий мыши или клавиатуры для управления объектами на 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 26 27 28 29 30 31 32 33 |
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
let x = 0;
let y = 0;
let speed = 5;
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(x, y, 20, 0, 2 * Math.PI);
context.fillStyle = 'red';
context.fill();
requestAnimationFrame(draw);
}
function move(e) {
if (e.key === 'ArrowRight') {
x += speed;
} else if (e.key === 'ArrowLeft') {
x -= speed;
} else if (e.key === 'ArrowDown') {
y += speed;
} else if (e.key === 'ArrowUp') {
y -= speed;
}
}
document.addEventListener('keydown', move);
requestAnimationFrame(draw);
|
В этом примере мы добавили функцию move, которая принимает событие клавиатуры и изменяет координаты круга в зависимости от нажатой клавиши. Таким образом, вы можете создавать интерактивные анимации на Canvas, которые реагируют на пользовательский ввод.