Зачем использовать тег HTML 5 Canvas?

Question

Простите меня за невежество, но я новичок в области HTML 5 и никогда не работал с графикой с использованием Javascript.

Я немного читал и наткнулся на тег Canvas, и источник заявил, что тег canvas работает как графический контейнер и используется для визуализации графики на веб-странице с использованием Javascript.

Мои вопросы: зачем мне использовать Canvas в качестве заполнителя для рендеринга графики вместо использования какого-либо другого произвольного тега, который можно использовать в качестве графического заполнителя, например?

Answer 1

Тег

A <canvas> в точности похож на тег <img>, с той разницей, что вместо загрузки изображения из сети вы можете нарисовать его самостоятельно с помощью кода JavaScript.Вы можете рисовать линии, круги, заполненные многоугольники, градиенты и матрицы-изображения.Вы также можете перерисовать содержимое холста в цикле для создания анимации.

Чтобы увидеть, что вы можете сделать с простым холстом 2d (без webgl, просто стандартный рендеринг 2d), посмотрите на этот маленькийdemo или посмотрите это видео , если ваш браузер слишком старый и не поддерживает canvas.

Это чистый javascript, ничего не загружается из сети, все вычисляется в браузере, включая текстуру и изображение с трассировкой лучей, используемые для envmapping части.Все в одном 4Kb html-файле.

Вы действительно думаете, что можете сделать то же самое, используя обычные <div> s?

РЕДАКТИРОВАТЬ:

Для гораздо более простой демонстрации считаемый источник вы можете проверить этот вращающийся икосаэдр .

Answer 2

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

Answer 3

Вы не можете рисовать на произвольных элементах.

Answer 4

Canvas позволяет манипулировать пикселями с приемлемой скоростью.Вы можете рисовать различные формы, устанавливать цвета для пикселей и т. Д. С помощью div вы можете отображать только стандартные элементы HTML.

Answer 5

DIV - контейнер для других тегов.CANVAS - это контейнер для пикселей.

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

Браузеры изначально поддерживают различные процедуры рисования для CANVAS, тогда как вам придется полностью готовить свои собственные в JS для DIV.

Действительно хорошим источником информации о канве HTML5 является http://diveintohtml5.ep.io/canvas.html

Answer 6

Зачем использовать холст:
1 - холст безопасен в использовании и совместим с мультиплатформой.
2 - есть много готовых функций для использования в анимации.
3 - вы можете играть со скоростью, пикселями, цветами.
4 - вы можете сохранить результат холста как изображение. 5 - Вы можете профессионально реализовать игры с холстом. проверьте здесь

просто действует как вспышка, но без плагинов.

usefaul библиотеки для использования:
- мольберт js : флеш как библиотека
- обработка js : открытая библиотека анимации соуса

Answer 7

Рисование с использованием

<canvas> 

Будет загружаться сразу при входе на веб-страницу с этим в использовании, где

<img>  

Это займет гораздо больше времени.