Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Canvas-v-html5-osnovy

Canvas в HTML5. Основы

Новая спецификация HTML5 включает в себя новый тег (элемент) canvas. Это является основной изюминкой HTML5. Тег canvas представляет из себя интерфейс прикладного программирования для рисования: заливки, формы, линии, кривые и т.п. В спецификация HTML5 этому элементу уделяется самый больший раздел и не зря. Если вы изучите все примочки canvas, то для вас откроется новый мир в программировании! Если говорить по-русски, то в переводе с английского canvas переводится как «холст».

На сегодняшний день многие современные браузеры поддерживают этот тег (даже IE9+). Но пока что рисовать можно только в 2D-контексте с помощью JavaScript, то есть в двухмерном пространстве. Интерфейс программирования приложений холста (API) включает в себя множество функций. Многие говорят, что эта технология сможет заменить Flash-технологии. Но боюсь это будет не скоро, потому как код для создания приложений просто огромен и пока многие программисты всё-таки отдают своё предпочтение Flash. Однако, можно с уверенностью сказать, что за Canvas будущее! Я уверен, что появится поддержка 3D-контекста. И мы увидим совсем другой интернет.

Ну вот после небольшого вступления, думаю стоит поговорить как же используется данный тег. Начнём мы с самых озов, а именно с синтаксиса добавления холста
в HTML документ:

<canvas width="400" height="300"><canvas>  

Изначально холст полностью прозрачен, так как ему не заданны стилевые свойства. Обратите внимание, если не указать ширину и высоту холста, то по умолчанию он принимает следующие значения: ширина-300 пикселей и высота-150 пикселей. Пока что на этом холсте ничего нет. Как же на нём рисовать? — спросите вы. Сейчас расскажу. Для начала нам нужно получить контекст (context) для элемента. Для этого мы будем использовать метод DOM — getContext:


 var canvas = document.getElementById('Mycanvas');
var holst = canvas.getContext('2d');

Можно заметить, что для метода getContext использовался параметр 2d. Именно этот параметр указывает, что рисовать мы будем в 2-х мерном пространстве. Скорее всего для рисования в трехмерном пространстве будет использоваться параметр 3d. Следует учесть, что для каждого элемента можно использовать только один context. Также можно проверить использует ли браузер пользователя элемент canvas:

var canvas = document.getElementById('Mycanvas');
if (canvas.getContext){
var holst = canvas.getContext('2d'); // код для рисования } else { // выводим сообщение о том, что браузер пользователя не //поддерживает canvas }

Хоть и Internet Explorer до версии 8 включительно не поддерживает тег canvas, частично всё же эту проблему можно решить. Для этого нужно скачать файл excanvas.js и вставить в верхнюю часть страницы вот такой код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas для IE</title>
<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
<body>
...
</body>
</html>

Есть правда один нюанс. Если вы будите создавать приложения, то вы увидите жуткие тормоза в IE. Но для простых примерах этот скрипт подойдет. Покажу для наглядности весь код для рисования на холсте:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas для IE</title>
<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
<body>
<script>
var canvas = document.getElementById('Mycanvas');
if (canvas.getContext){
var holst = canvas.getContext('2d');
// код для рисования
} else {
// выводим сообщение о том, что браузер пользователя не //поддерживает canvas
}
</script>
<canvas id="Mycanvas" width="400" height="300"></canvas>
</body>
</html>

Из кода видно, что для рисования на холсте нужно обратиться к скрипту через идентификатор (id=»Mycanvas»). В следующих уроках мы придадим стиля нашему холсту и начнём рисовать!



наверх