Основы концепции< canvas > создает поверхность для рисования, дающую контекст отрисовки, которая используется для создания отображаемого контента и манипуляций с ним. Иными словами, данный тег создает прямоугольную область, на которой можно "рисовать" при помощи JavaScript. Единственным поддерживаемым на данный момент является двумерный контекст отрисовки, В будущем скорее всего будет добавлен 3D контекст. Размещается на HTML – странице < canvas > следующим образом: <canvas> </canvas> Включенным в страницу элементом canvas можно как угодно манипулировать, используя JavaScript. В него можно добавлять графику, линии и текст, вы можете сами рисовать на нем и даже добавлять в него полноценную анимацию. Чтобы программным путем использовать холст, прежде всего необходимо получить его контекст (context). После этого можно выполнить необходимые действия по отношению к контексту, а затем окончательно применить к нему их результат. Т.е. непосредственно отрисовка происходит после того, как все действия по отношению к холсту определены. С учетом того, что < canvas > поддерживается не всеми браузерами, или их версиями, разработчикам рекомендуют использовать его только в тех задачах, где холст не может быть заменен другими элементами. На момент написания лекции была заявлена базовая поддержка < canvas > следующими браузерами: · Internet Explorer 9 · Firefox (версии 9 - 12) · Chrome (версии 17 - 18) · Safari (версии 5.0 – 5.1) · Opera (11.6) · iOS Safari 5.0 · Opera Mobile 12.0 · Android Browser (версии 3.0 – 4.0) В случае, если к веб - странице, содержащей холст, обратились посредством браузера, не поддерживающего данный элемент, пользователь увидит содержимое, размещенное в рамках парного тега < canvas >. Такое содержимое называется альтернативным, или аварийным. К примеру: <canvas> Данная версия браузера не поддерживает canvas элемент </canvas> Разумеется, в качестве аварийного содержимого может быть использован не только текст.
|
