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

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

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

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

Ответ 1

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

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

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

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

EDIT:

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Использовать библиотеки библиотеки:
- мольберт js: flash как библиотека
- обработка js: открыть библиотеку анимации саун

Ответ 7

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

<canvas>

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

<img>

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