Зачем использовать тег 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>
Это займет гораздо больше времени.
