HTML <canvas> элемент используется для создания графики на веб - странице.
Графический слева создается с <canvas> . Он показывает четыре элемента: красный прямоугольник, градиент прямоугольник, многоцветная прямоугольник, и текст многоцветной.
Что такое HTML Canvas?
HTML <canvas> элемент используется для создания графики, на лету, с помощью сценариев (usually JavaScript) .
<canvas> элемент является только контейнером для графики. Вы должны использовать сценарий на самом деле рисовать графики.
Холст имеет несколько методов для рисования путей, коробки, круги, текст, и добавление изображений.
Поддержка браузеров
Числа в таблице указать первую версию браузера , которая полностью поддерживает <canvas> элемент.
| Элемент | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2,0 | 3.1 | 9.0 |
HTML Canvas Можно рисовать текст
Холст может нарисовать красочный текст, с или без анимации.
HTML Canvas Может рисовать графики
Холст имеет большие возможности для графического представления данных с образами графиков и диаграмм.
HTML Canvas может быть анимированным
Объекты Canvas могут двигаться. Все возможно: от простых прыгающие шарики, чтобы сложные анимации.
HTML Canvas может быть интерактивным
Холст может реагировать на события JavaScript.
Холст может реагировать на любые действия пользователя (щелчки, щелчки мыши, нажатия кнопок перемещения пальца).
HTML Canvas может быть использовано в играх
Методы холста для анимации, предлагают много возможностей для игровых приложений HTML.
Холст Пример
В HTML, A <canvas> элемент выглядит следующим образом :
<canvas id="myCanvas" width="200" height="100"></canvas><canvas> элемент должен иметь атрибут , поэтому он может называться по JavaScript.
Ширина и высота атрибута необходимо определить размер холста.
Tip: Вы можете иметь несколько <canvas> элементы на одной странице HTML.
По умолчанию, <canvas> элемент не имеет границ и никакого содержания.
Чтобы добавить границу, используйте атрибут стиля:
пример
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Попробуй сам " Следующие главы показывают, как рисовать на холсте.