Зачем использовать холст для анимации в html5?

Question

Я новичок в html5 и играю с холстом. Мне интересно, когда холст действительно будет необходим / полезен? то есть когда он предназначен для использования?

Если мне нужно сделать простую анимацию, например переместить теги, мне действительно нужен холст или лучше / проще просто использовать jquery / js?

Answer 1

С помощью canvas вы можете создавать 2D-графические приложения, анимацию, простое преобразование изображений (например, их вращение), графический интерфейс и т. Д. Некоторые примеры:

1. Игра астероидов
2. пазл
3. О GUI, к сожалению, я не могу загрузить сайт, не знаю почему ... он назывался iWidgets.com , единственное, что я нашел, это скриншот, Вы можете увидеть синий трубопровод там, они связали элементы. Это было сделано с помощью холста; во время перемещения элементов трубопроводы также перерисовывались; при изменении активного элемента все его соединения изменяют цвет на желтый (поэтому вы видите зависимости). Хороший проект, надеюсь, он не будет доступен какое-то время ...

Хорошая статья о том, как использовать это здесь

Из " Просмотр элемента HTML5 Canvas ":

Элемент canvas интересен и достойный внимания, потому что это позволяет, впервые, прямой рисунок графика в браузере без использовать для внешнего плагина, такого как Flash или Java. Красота холста в том, что он полностью контролируется с помощью простого Код JavaScript, то есть он основан на мощный функционал JavaScript уже предоставляет и не требует сумасшедшая кривая обучения для использования.

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

Еще один решающий фактор для выбора холст должен был проверить анимацию возможности и возможности этого быть потенциальной заменой Flash. Теперь Flash, очевидно, имеет функции, которые холст никогда не мог подражать, однако это захватывающая концепция, тем не менее чтобы точно увидеть, чего можно достичь с холстом, который обычно сделано для достижения Flash.

прочитайте эту статью, чтобы получить больше полезной информации

PS. Если ваша анимация связана с перемещением тегов (например, частей вашей страницы), то холст не подходит. Холст для графического рендеринга. Так что в этом случае вы будете использовать jquery или другие библиотеки JS.

Answer 2

Вот лучшие практики для решения, когда использовать CSS3 Transitions / Animations или Canvas. Имейте в виду, что если вы используете jQuery, под обложками они будут использовать CSS3-переходы или анимацию, когда это возможно.

Переводы / анимации CSS3 - используйте их, если вы анимируете стили элементов DOM, такие как положение и размер

Анимации холста - используйте анимацию холста, если вы анимируете что-то более сложное, например, если вы создаете онлайн-игру или строите симулятор физики. Если вы анимируете трехмерные модели, вам наверняка захочется использовать canvas, чтобы вы могли использовать WebGL

Answer 3

Canvas дает вам доступ к пиксельному уровню графики. Если вы хотите сделать переход по шахматной доске, вы можете сделать это с помощью сценария на холсте, но не в jquery.

Несколько примеров того, что возможно (уже сделано), см. http://www.netzgesta.de/transm/