Анимация на canvas

Последнее обновление: 07.11.2023

Сочетание отрисовки различных фигур на canvas с приминением функции requestAnimationFrame() позволяет создать анимацию содержимого элемента canvas.

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

  1. Очистка области рисования

  2. Опциональное сохранение состояния

  3. Рисование отдельного кадра

  4. Опциональная загрузка состояния

Эти шаги обычно инкапсулируются в функцию, которая затем вызывается через равные промежутки времени (для каждого кадра анимации). Для выполнения функции применяется метод requestAnimationFrame(), который специально предназначен для работы с анимацией внутри веб-страницы.

Например, определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250" style="background-color: #eee; border-color: #ccc;"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let x = 0;
let step = 1;
function draw() {
	context.clearRect(0,0,400,250);   // очистка области рисования  
	console.log(x);
	context.fillStyle = "red";  
	context.fillRect(x,10,40,40);      // отрисовка прямоугольника 
	if(x >= 360) step = -1;
	if(x <= 0) step = 1;
	x += step;
	window.requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
Анимация фигур canvas в JavaScript

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

Аналогичным образом можно анимировать целые композиции фигур:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
function draw() {
	context.clearRect(0,0,500,300);   // очистка области рисования  
	const time = new Date();  
	// угол для вращения прямоугольников 
	const angle = ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds(); 
	context.fillStyle = "red";   
	context.save();                   
	context.translate(150,150);       
	context.rotate(angle);           
	context.translate(0,25);         
	context.fillRect(5,5,20,20);      // красный прямоугольник   
	context.restore();       

	context.fillStyle = "yellow";   
	context.save();                   
	context.translate(150,150);       
	context.rotate(angle);           
	context.translate(0,50);         
	context.fillRect(5,5,20,20);      // желтый прямоугольник
	context.restore();              

	context.fillStyle = "green";  
	context.save();                  
	context.translate(150,150);       
	context.rotate(angle);           
	context.translate(0,75);         
	context.fillRect(5,5,20,20);      // зеленый прямоугольник
	context.restore();                 
	window.requestAnimationFrame(draw);
}
draw();

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850