Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 8:

Использование объектной модели документа для манипулирования содержимым страницы мобильного виджета

Canvas - холст для рисования в мобильных приложениях

Это самое известное новшество языка HTML5. Что же представляет этот холст? Canvas - это HTML-элемент, предназначенный для создания растровых изображений посредством JavaScript.

Вообще, сама идея создания изображений (не путать со вставкой рисунков) совсем не нова, но вот воплощения ее до появления canvas удачными можно назвать с сильной натяжкой. Во-первых, это технология Flash со всеми ее достоинствами и недостатками, каковых, к сожалению, немало. Во-вторых, это VML (Vector Markup Language) - язык векторной разметки от Microsoft, в силу своей привязки к конкретной программной платформе не нашедший широкого распространения. Идея (да и первая реализация) canvas принадлежит компании Apple (в движке WebKit в 2004 году), которая, впрочем, пошла навстречу общественности и консорциуму W3C и в 2007 году раскрыла свои патенты без сохранения авторских прав. По сути, canvas является интерфейсом прикладного программирования. Уже сегодня его поддерживают все наиболее популярные, в том числе и мобильные, браузеры. С помощью canvas строятся графики, анимация, разрабатываются игры. Спецификации canvas - это одна из самых объемных частей HTML5, и мы рассмотрим лишь малую долю его возможностей для мобильных приложений.

Используя тег <canvas>, вы сможете нарисовать на HTML5- странице своего мобильного приложения почти все, что угодно. Вам не потребуется запоминать много атрибутов, поскольку данный тег использует только два атрибута - width (ширина) и height (высота). Тем не менее, применение элемента canvas выполняется в DOM-стиле. По сути, DOM-стиль означает запись необходимого JavaScript - кода со ссылками на объекты, их свойства и методы. Чтобы упростить нам жизнь, JavaScript использует то, что можно назвать облегченной версией ООП. Работа с DOM представляет собой объектно-ориентированное программирование в том отношении, что все используемые ссылки являются ссылками на объекты и их свойства.

Изначально вы имеете дело с пустым холстом, который задается атрибутами width (ширина) и height (высота) тега <canvas>. Для простоты первый шаг по созданию элемента canvas на вашей странице вы можете сравнить с натягиванием художественного холста на раму.

Представление о сетке

Для успешной работы с элементом canvas вы должны иметь представление о сетке и декартовых координатах. Верхний левый угол обладает координатами 0,0. По мере движения вправо первое значение растет. Если вы переместитесь вправо на 15 пикселов, значения будут равны 15,0- это движение по оси X. По мере движения вниз (по оси Y) будет увеличиваться второе значение. Если вы переместитесь вниз на 20 пикселов, положение будет выражаться уже значениями 15, 20. Предположим, вам нужно использовать эту точку в качестве точки отсчета для создания квадрата со стороной в 100 пикселов. Составить представление о положении и относительном размере изображения вам поможет отображение на html-странице сетки, однако, создавая изображение без отображения сетки, вы будете иметь более ясное представление о его внешнем виде. В Visual Studio вы можете использовать оба режима отображения.

Подготовка тега canvas к созданию рисунка

Теперь мы готовы к тому, чтобы заполнить пустой прямоугольник, и для этого нам потребуется использовать JavaScript. Единственное, что нужно сделать с тегом <canvas>, - это определить область для размещения изображений в контексте визуализации, а также идентификатор. С точки зрения разметки, <canvas> - это простой до предела элемент с тремя атрибутами - id, width и hight. Таким образом, создание первого рисунка мы начнем со следующего тега:

<canvas id="briefCase" width="950" height="950" >

Для простоты атрибутам width и height присваивается одинаковое значение в 950 пикселов; также новому объекту canvas присваивается имя briefCase. Обычно холст отражается как пустой прямоугольник без рамки, т.е. он не виден вообще. Чтобы сделать холст видимым, с помощью таблицы стилей ему можно задать цветной фон или рамку, как показано в следующем правиле:

canvas{
	border: 1px, dashed black;
}

Остальная часть работы представляет собой программирование на JavaScript модели DOM. Мы будем использовать в JavaScript объектно-ориентированный подход, позволяющий отразить программную структуру DOM. Таким образом, наша первая задача состоит в том, чтобы создать объект и метод для него:

CanvasMaster = new Object(); CanvasMaster.showCanvas = function () {...}

Этот код создаст объект и метод для этого объекта - функцию, которая будет выполнять операции JavaScript, когда нам это потребуется.

Далее программе требуется определенным образом получить доступ к узлу canvas модели DOM. Такой доступ обеспечивает модель DOM, которая содержит объект canvas и сопутствующие ему методы и свойства. Первый шаг при этом состоит в том, чтобы создать объект, содержащий узел DOM. Думайте об этом не как о создании переменной и присвоении ей узла, а как о создании экземпляра объекта, обладающего свойствами и методами объекта canvas.

В этой строке создается объект, содержащий объект canvas с именем briefCase:

canvasNow = document.getElementById("briefCase");

После того как мы создадим экземпляр объекта canvas, программе нужно будет получить контекст визуализации. Самый популярный из доступных контекстов называется 2d, что подразумевает контекст двухмерного рисования. Для получения контекста визуализации используется метод getContext (), которым обладает объект canvas (canvasNow):

contextNow = canvasNow.getContext('2d');

Экземпляру контекста визуализации присваивается имя contextNow. Данный объект обладает свойствами и методами контекста визуализации 2d.

Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?