Как сделать анимацию на Canvas?

Пользователь

от willis.streich , в категории: Другие , год назад

Как сделать анимацию на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от vladimir , год назад

@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 запускает следующий кадр анимации автоматически.

Пользователь

от guillermo , 6 месяцев назад

@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, которые реагируют на пользовательский ввод.