Предыдущий ролик Следующий ролик  

Видео урок: Как встроить Canvas в реальную веб страницу

HTML5: графика и анимация с Canvas

В этом уроке мы рассмотрим, как встроить canvas в реальную веб страницу. А чтобы сделать это, мы будем использовать пример сайта Explore California, который находится в файлах с упражнениями. Вот здесь у меня файлы с упражнениями ExploreCalifornia. Давайте я сначала покажу вам страницу, которую мы создадим. Вот страница index, и это сайт Explore California, с которым мы будем работать. Нажимаю на раздел TOURS, и вы видите, что здесь есть список туров.

И мы собираемся создать поисковик туров на основе canvas, вот что мы собираемся сделать. Давайте перейдем на страницу TOUR FINDER. Вы видите, что прямо сейчас этот пример пустой, но давайте я покажу вам окончательную версию, чтобы вы увидели, на что она будет похожа. А похожа она будет вот на что. У нас будет canvas, который отображает график некоторых атрибутов заданного тура, и в нем будут учтены такие вещи как длительность, высота над уровнем моря, окружающая обстановка и общая сложность заданного тура.

Вы видите, что если мы выбираем другой тур, меняется график, где будет показана общая сложность тура. В данном случае, если тур простой, он показан зеленым цветом, если он посложнее, он показан желтым цветом. Если тур действительно трудный, тогда полоска сложности показана красным. И вы видите, что когда я выбираю каждый из этих туров, график меняется прямо на странице. Чтобы сделать это без canvas, вы можете воспользоваться разными технологиями. Вы можете использовать другое решение для динамических медиа, например, плагин типа Silverlight или Flash, или вам нужно было бы создавать отдельные графические изображения, а затем менять их местами, когда выбирается новый тур.

Однако каждый раз, когда вы добавляете новый тур или меняете некоторые данные, связанные с конкретным туром, тогда вам нужно будет создать новое изображение или отредактировать существующее, а это действительно трудоемкий процесс, и эта работа не очень подходит для примеров интенсивной обработкой данных. Поскольку опять же, предположим, что кто-то делает работу по конкретному туру. Если он использует canvas, все, что ему нужно сделать, это поменять маленький кусочек данных, и график canvas обновится автоматически. Чтобы сделать это, используя какое-то более сложное решение, пришлось бы потрудиться гораздо сильнее.

В общем, вот что мы с вами создадим, и давайте сделаем это. Это мы закрываем. Переходим к коду. Вот в файле snippets в главе 08 есть пример для Explore California. Открываю файл для начальной версии, вот мы в ExploreCalifornia. Итак, открываем страницу tourcompare, перематываем вниз, я покажу вам, куда мы это вставим. Мы вставляем этот код сюда, где сказано tourDescriptions.

Давайте вернемся обратно в snippets и вставим контент, который нам будет нужен для выбора тура, вот он. Чтобы сделать это, нам понадобится данный кусок кода, я его вставлю и поясню, что он делает. А вставим мы его вот сюда. Что я сделал - я вставил немного HTML кода, в котором есть список для выборки, и он называется tourSelector. И вы видите, что есть наборы опций, которые позволяют мне выбрать разные туры. А затем, ниже, у меня есть мой canvas, и вы видите, что у canvas есть id, а также ширина и высота. А также я вставил тонкую сплошную границу в один пиксель шириной, чтобы мы могли увидеть canvas на странице.

Теперь давайте все сохраним и вернемся в браузер, чтобы посмотреть, как все выглядит. Давайте рассмотрим страницу tourcompare. И вы видите, что здесь у нас есть canvas, а также список с выборкой. В общем, мы на правильном пути. Все, что сейчас мы делаем, это рисуем canvas, а затем отвечаем на изменения в этом меню, например, если меню меняется, мы перерисовываем canvas. Давайте вернемся и сделаем это. Вот мы в коде. Давайте прокрутим вниз до этой части скрипта, потому что именно здесь все происходит, и сейчас перейдем в snippets.

Давайте скопируем первые несколько строк кода. Мы их скопируем, и я сделаю здесь некоторые пояснения. Вот сюда я вставляю закрывающий тег script. Итак, здесь у меня есть массив данных о турах, а внутри массива есть набор объектов, их пять штук для пяти туров. Также есть некоторые свойства, связанные с каждым объектом. Есть название тура.

Есть длительность тура. И я произвольно выбрал в шкале эти числа, и они просто будут влиять на размер полос в графике, но если у вас уже есть какие-то данные, вы можете вставить в график все, что угодно, а затем провести необходимую конверсию, чтобы в графике были нарисованы полосы нужного размера. В данном случае, чтобы не усложнять пример, я просто оставил между этими числами соотношение 1:1. Например, длительность (duration) 200 обозначает два дня, и так далее. Итак, у нас есть длительность (duration).

У нас есть значения для высоты над уровнем моря (elevation), значения, касаемые сложности окружающей обстановки (environment) и общая оценка сложности (difficulty rating). Итак, есть пять объектов, а затем идет несколько переменных, в которых будет содержаться ссылка на canvas для туров и контекст этого canvas. Давайте вернемся в snippets. Теперь мы скопируем функцию drawChart. Эта функция будет вызываться каждый раз, когда меняется индекс списка выборки. Итак, мы занимаемся рисованием заднего фона графиков, рисованием меток и рисованием данных.

Копируем эти строки. Сначала займемся drawBackground. Копирую эту функцию и вставляю ее. И в настоящее время мы заполним маленькие пустые заглушки для меток и данных о турах. . Мы прописываем функцию drawLabels (forWhichTour), и у нас будет функция drawTourData (forWhichTour).

Итак, у нас есть заглушки для этих функций, и мы можем продолжить и посмотреть на код. Но хотя, прежде чем мы этим займемся, давайте сделаем одну вещь. Давайте скопируем код инициализации, который устанавливает график, когда страница впервые загружается, и вот этот код. Здесь я использую код jQuery, чтобы создать функцию, которая запускается, когда загружается страница, а теперь давайте продолжим и закомментируем вот это.

Тогда будет вызвана ссылка на canvas, затем получен рисующий контекст canvas, а затем вызвана функция drawChart с 0, чтобы инициализировать график для первого набора данных о туре. Давайте сделаем сохранение и посмотрим на это в браузере. Обновим страницу. И вы видите, что теперь у нас есть задний фон canvas и область для рисования, а теперь давайте вернемся к коду и посмотрим, как все работает. Итак, здесь есть drawBackground, и кое-что происходит. Во-первых, я сохраню контекст canvas.

Опять же, я это делаю, потому что это считается хорошей практикой, в случае если любое рисование произошло до того, как была вызвана эта функция. Итак, первое, что мы делаем, это заполняем задний фон графика. Мы устанавливаем fillStyle на brownish (коричневатый цвет), а затем мы вызываем fillRect, начиная от верхнего левого угла и проходя по всей ширине и высоте canvas. Это довольно просто. Затем мы создаем область для графика. Мы меняем strokeStyle на темно серый цвет, а затем мы вызываем strokeRect, и таким образом мы получаем контур области, где мы будем рисовать полосы. Затем нам нужно нарисовать строки графика. Мы меняем strokeStyle на светло серый цвет, и у нас есть цикл, который начинается в конкретной точке canvas, в точке x, идет в конкретную точку x, а инкремент составляет каждые 20 пикселей.

Внутри этого цикла мы начинаем путь, а затем мы рисуем каждую строку и заполняем ее, и таким способом будут созданы эти маленькие полосы вдоль рисующей поверхности, вот мы это и сделали. Мы восстанавливаем контекст canvas, и функция существует. Теперь давайте заполним функцию drawLabels. Функция drawLabels отвечает за две вещи: она рисует название тура и она рисует метки. Давайте скопируем этот код и вставим его. И опять же, мы каждый раз используем функции для сохранения и восстановления контекста.

Это хорошая практика, не обязательная в данном случае, но мы все равно так сделаем. Сейчас мы вырисовываем название тура, мы устанавливаем шрифт на 24pt Arial, и мы устанавливаем fillStyle так, чтобы цвет текста был синим, а затем мы вызываем шаблон fillText. fillText принимает строку с названием тура плюс свойство для данных по туру для текущего выбранного тура и пишет текст в этом месте в canvas, вот эта часть. Для меток мы меняем шрифт на 20pt Arial, а fillStyle на этот текст, и мы рисуем метки для длительности, высоты над уровнем моря, окружающей обстановки и общей сложности.

Мы используем функцию fillText в разных точках canvas. Давайте сохраним и обновим страницу. Вы видите, как все выстраивается. Вы видите, что здесь есть метки, которые мы нарисовали в canvas, используя текстовую функцию. Здесь есть название текущего тура. И он начинается с 0, так что это первый объект данных. Теперь нам нужно нарисовать полосы для разных точек данных и реагировать на изменения в этом меню. Возвращаемся к коду, и теперь давайте снимем комментарий с этой функции.

Мы используем jQuery, чтобы увидеть событие по изменению для списка с выборкой. Помните, у нас есть id для tourSelector. Итак, мы ловим событие по изменению, и когда бы это событие не возникло, мы просто вызываем функцию, которая вызывает drawChart, и мы получаем selectedIndex списка выборки. Он будет идти от 0 до 4, потому что столько опций находится в списке. Теперь, когда все работает, мы сохраняем.

И прежде чем мы начнем рисовать данные, давайте посмотрим на результат этого. Обновляем страницу, и вы видите, что когда я меняю меню, меняется текущий тур, то есть, меняется название. Все верно, теперь снова вернемся к коду, и теперь мы поработаем над той частью, где на самом деле рисуются данные, и делается это вот тут. Копируем эти строки и вставляем их в часть drawTourData.

Теперь обновим браузер и посмотрим на результат. Данные также нарисованы, и вы видите, что каждый раз как мы меняем выборку, меняются данные. Давайте вернемся к коду и я поясню, что происходит. Как вы могли догадаться, каждая из полос в этом графике - это прямоугольник. Чтобы нарисовать их мы устанавливали strokeStyle и fillStyle для прямоугольника, а затем нужно просто нарисовать отдельную полосу для каждого свойства. И помните, индекс forWhichTour передается из функции для рисования графика, и мы используем это в качестве индекса в массиве tourData.

Мы получаем каждый объект, и мы получаем длительность, высоту над уровнем моря, окружающую обстановку, а затем сложность конкретного тура. Вы видите, что все зависит от простого вызова fillRect и strokeRect для каждого из этих пунктов данных. Все начинается в конкретной точке canvas и идет по ширине. Значение поля данных в объекте просто идет по ширине, а высота каждой из этих полос составляет 30 пикселей. Итак, мы заполняем каждый прямоугольник, а затем обрамляем его, так чтобы видеть контур. И делаем мы это для каждого пункта данных.

Видите, что для других свойств он всегда желтый. Но для сложности мы используем разные цвета, основываясь на том, является ли тур легким, средним или тяжелым по сложности. Мы выбрали зеленый цвет для легкого тура, желтый - для тура средней сложности и красный для тяжелого. Для этого нужно просто поменять стиль заполнения, основываясь на оценке сложности. Итак, мы проверяем оценку сложности, и если она меньше или равна 150, мы выбираем зеленый цвет. Если оценка находится между 150 и 300, мы выбираем желтый цвет. А если оценка больше 300, мы выбираем красный. Затем мы просто заполняем и обрамляем полосу, обозначающую сложность, и рисуем ее.

Сохраняем, обновляем. И вы видите, что при выборе каждого тура, мы получаем график, нарисованный в режиме реального времени. Давайте посмотрим, работает ли все это в другом браузере. Переключаюсь на Firefox. Вот мы тут. Вы видите здесь тот же вид, то же поведение, все верно. Итак, с помощью canvas мы нарисовали интерактивный поисковик туров. Давайте сделаем краткое резюме.

Используя canvas, мы выстроили на странице область и прикрепили список с выборкой, при изменении которого мы получаем индекс выборки, чтобы вывести данные по соответствующему туру. Мы использовали прямоугольники, текст, некоторые контуры, чтобы создать canvas, и это действительно реальный пример вставки canvas на веб страницу.