Насколько холст тег выгоден в HTML5?

Question

Я младший разработчик. Я не могу понять, насколько полезен тег canvas? Я прочитал много статей на эту тему, но не могу получить root-преимущества от тега canvas.

Answer 1

Думайте о разнице между canvas и svg как о разнице между Photoshop и Illustrator (или Gimp и Inkscape для вас, ребята из OSS). Один касается растровых изображений, а другой - векторных изображений.

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

С помощью svg, поскольку вы рисуете векторы, вы можете легко перемещать, масштабировать, вращать, перемещать, переворачивать рисунки. Но так как это векторы, вы не можете легко размывать края в соответствии с толщиной линии или плавно соединять красный круг в синий квадрат. Вам необходимо смоделировать размытие, рисуя промежуточные многоугольники между объектами.

Иногда их варианты использования перекрываются. Как и многие люди, используют canvas для создания простых линий и отслеживания объектов как структур данных в javascript. Но на самом деле они оба служат разным целям. Если вы попытаетесь реализовать векторное рисование общего назначения в чистом javascript поверх холста, я сомневаюсь, что вы будете быстрее, чем использовать svg, который наиболее вероятно реализован в C.

Answer 2

Некоторые возможные варианты использования Canvas:

• Программа для рисования изображений
• Редактирование / управление фотографиями
• 2D-игры
• Расширенный просмотр изображений, например Microsoft Deep Zoom

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

Answer 3

По сути, благодаря canvas теперь мы можем рисовать / визуализировать 2D фигуры, используя HTML5 и API canvas.

В качестве примера того, что теперь возможно с canvas, посмотрите это

Answer 4

Холст позволит вам рисовать идеальную графику.

Answer 5

мой личный взгляд на холст (и когда я действительно нашел вариант использования для холста) - это возможность выбирать цвета и менять цвет на пиксель в элементе холста - фактически перемещая изображение из того, о чем мы не имеем никакой информациичто происходит внутри него с таким же элементом, как и все другие элементы DOM (и да, я знаю о текущих проблемах с canvas и DOM - конечно, об этом позаботятся в будущем)

уверен - canvas сделал некоторыеанимация вроде бы проще и без плагинов, но что мы могли бы сделать раньше (в основном с помощью flash) - я думаю, что реальная важность - это способность знать, что происходит на странице.

Answer 6

Мне пришло в голову классные проекты:

• Визуализация данных GPS.Данные GPS - это просто список координат в формате XML.Вы можете легко создать что-то в холсте, чтобы «соединить точки».
• Мобильное приложение, в котором пользователь может фактически подписать документ с помощью своего пальца - холст, позволяет экспортировать отрисованный чертеж холста в PNG, где его можно сохранить на сервере.
• ВВ игре, где у вас есть аватары, вы можете позволить пользователю реально рисовать на аватаре.Усы кто-нибудь?

Другие вещи:

• В iOS / Android использование множества CSS3-эффектов, таких как box-shadow, может привести к снижению производительности, особенно при анимации.Вы можете сделать много этой графики в одном теге canvas, вот пример: http://everytimezone.com/. Эта вещь безупречна на ipad.
• Классные фоновые эффекты.Например, попробуйте зайти на сайт Пола Айриша и наведите курсор на фон: http://paulirish.com/
• В этой книге HTML5, спонсируемой Google, многие эффекты используют canvas: http://www.20thingsilearned.com/ - особенноанимация "перелистывание страниц".