Как создают анимацию в html5 canvas?

Question

[Matvey Safronov]

Я только начинаю изучать эту технологию. Каким образом делают сложные анимации на канвасе? Уж врят ли пихают весь код в один setTimeout(), в теле которого описывают всю логику

Answer 1

[Дмитрий Беляев]

https://developer.mozilla.org/ru/docs/DOM/window.r...
Никаких таймеров для анимации

Answer 2

[xmoonlight]

Используют свои наработки или библиотеки.
Заранее, создают структуру приложения.
Анимация HTML5
PS: сводная таблица движков HTML5

Answer 3

[twobomb]

Как делаю я. Обычно у меня есть функция основная функция называю ее handler. Она постоянно вызывается. А в ней уже вызываются другие функции. Ну вот мой пример https://jsfiddle.net/twobomb/b05nmjs5/
Разработка на канвасе у меня обычно начинается со следующего кода

var canvas, ctxW = 500, ctxH = 500,ctx;

	window.onload = function(){
		canvas = document.createElement("canvas");
		canvas.width = ctxW;
		canvas.height = ctxH;
		document.body.appendChild(canvas);
		ctx = canvas.getContext("2d");
		handler();
	}

	function handler () {
		 ctx.clearRect(0,0,ctxW,ctxH);
   //Тут вызов функций и прочие реализации

		 setTimeout(handler,1000/60);
	}

Answer 4

[Сергей Сунцев]

Как вариант для конкретных задач можно юзать специальные canvas библиотеки.
К примеру konvajs.github.io для обычных анимаций (лично советую, очень удобный ООП подход),
или wellcaffeinated.net/PhysicsJS для простых физических анимаций.
Для серезного моделирования можно юзать three.js

Но конечно будет плюсом если знаешь основы чистого canvas

Answer 5

[Moe Green]

Библиотек для создания анимации на Canvas много.

Есть библиотеки для создания двухмерных объектов и их анимации и наиболее популярная на сегодня - это Pixi.js. Можно еще привести пример Fabric.js ( но она те так популярна и известна, как Pixi ).

Для создания и анимации трехмерных моделей на Canvas стандарт де-факто - это конечно же Three.js. Но это большая и серьезная библиотека )