Графика в HTML 4.01 и HTML 5: сравнительный анализ

В этой статье мы последовательно рассмотрим различия двух версий html, в особенности их возможности в области дизайна изображений.

1. HTML 4.01

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

Прежде всего, HTML 4.01 работает с таким тегом, как всем известный IMG. Он позволяет размещать в вебе изображения, хранящиеся в самостоятельных отдельных файлах. В этом теге поддерживаются такие форматы изображений, как GIF, JPEG, BMP, PNG.

Код здесь выглядит так: <img src="image.jpg">

Главное достоинство IMG — это простота. Изображение вставляется в веб страницу посредством одного простого тега. Однако есть у него и недостатки.

Здесь поддерживаются всего три формата графики, поскольку упомянутый BMP поддерживает только Internet Explorer, а реально этот формат практически не используется.

Графические объекты, которые помещаются на веб-страницах посредством IMG, статичны, их нельзя дорабатывать, дорисовывать и т.п.

С развитием и разработкой HTML появились средства, помогающие преодолеть недостатки тега IMG. Такими средствами стали теги EMBED и OBJECT, с помощью которых можно поместить на странице файлы любого формата. Здесь можно использовать для их обработки и представления на экране различные программы, работающие вместе с браузером — элементы ActiveX, а также модули расширения.

Достоинства кодов этих тегов таковы:

— С их помощью можно выводить на страницу графику практически любого существующего сегодня формата: Adobe PDF или Adobe Shockwave/Flash и проч. В принципе, тут есть только одно требование к системе – она должна содержать модуль расширения, но это может быть же элемент ActiveX с поддержкой данного формата данных.

Многие варианты модулей расширения и элементов ActiveX дают возможность на уровне веб-сценариев рисовать на изображении, уже имеющемся на веб-странице. К примеру, проигрыватель Flash дает возможность нарисовать на готовом изображении всё, что угодно, а также просто создать любую картинку с нуля. Однако у такого подхода имеется и много недостатков. В первую очередь, это величина и громоздкость HTML-кода, который используется для размещения модуля расширения или элемента ActiveX на веб-страницах.

Также много неудобств связано с тем, что изображение, как правило, хранится в отдельном файле; даже чтобы просто увидеть картинку, созданную с помощью модуля расширения или элемента ActiveX, пользователь должен иметь их на своем компьютере. Также есть и проблема с веб-браузерами: они поддерживают и не поддерживают эти программы по-разному. К примеру, программы с ActiveX поддерживает единственно Internet Explorer. Идеальным было бы решение, позволяющее и выводить на экран изображения, содержащиеся в отдельных файлах, и работать непосредственно с графикой, используя различные программы, причем последние должны быть встроены в сам веб-браузер, чтобы не привлекать дополнительные программы.

2.HTML 5

Язык программирования HTML 5 и поддерживающие его браузеры способны выполнить задачи, поставленные выше:

— Графика помещается на веб-страницу с помощью одного простого тега.

— Также есть возможность вставлять картинку, находящуюся в самостоятельном файле.

— Графика может создаваться на уровне веб-сценариев с помощью определенных программ.

— Нет необходимости в дополнительных программах – браузер уже содержит все необходимые элементы.

Тем не менее, и у HTML 5 есть недостатки. К примеру, вся без исключения графика создается программно, посредством веб-сценариев. А если нужно просто вставить изображение, находящееся в постороннем файле, удобнее воспользоваться знакомым тегом IMG.

Тег CANVAS

Необходимо помнить, что графика в HTML 5 выводится только если помещена в определенном месте страницы. Это место называют «канва», или «холст». За пределами такой канвы никакую графику разместить невозможно. Канва задаётся на сайте с помощью тега CANVAS. Код выглядит так:

<CANVAS ID="CAN1"></CANVAS>

Канва должна всегда иметь имя, для чего используется атрибут ID, который поддерживают практически все теги. Значением этого атрибута как раз и является имя канвы. Кроме того, тег CANVAS, в свою очередь, поддерживает пару весьма полезных атрибута: Атрибут HEIGHT — это пиксельная высота канвы. По умолчанию же высота канвы всегда равняется 150 пикселям. Атрибут WIDTH —пиксельная ширина канвы. По умолчанию — 300 пикселей.

Код таков:

<CANVAS ID="CAN1" WIDTH="400" HEIGHT="300"></CANVAS>

Контекст рисунка

Абсолютно все виды графики создаются на канве с помощбю программ посредством веб-сценариев, что означает создание загрузочного веб-сценария или обработчика события. Далее в нем пишутся теги и коды, которые и нарисуют картинку.

Набор необходимых для рисования на канве инструментов содержится в так называемом контексте рисования – объекте CanvasRenderingContext2D. Чтобы заполучить объект CanvasRenderingContext2D — контекст рисования канвы – нужно вызвать метод getContext объекта HTMLCanvasElement. Его единственным новым параметром станет строка », а результатом ее введения — контекст рисования. Строка «2d», параметр, передаваемый методу getContext, указывает на то, что задается двухмерный контекст рисования. Это единственный вид контекста рисования, который поддерживают веб-браузеры на сегодняшний день. Возможно, в будущем веб-браузеры будут поддерживать и рисование в 3D…

Коды такие: var oCan1 = document.getElementById("can1") var ctx1 = oCan1.getContext("2d"). Здесь веб-сценарий получает объект HTMLCanvasElement, он представляет канву "can1", и вставляет ее в переменную "Can1". Затем, получив контекст рисования —CanvasRenderingContext2D — веб-сценарий присваивает этот контекст переменной "ctx1". Получив же контекст рисования, можно начинать создавать графику.

Примитивы и координаты

Графика на канве представляется набором простых геометрических фигур, называемых примитивами. Это такие формы, как прямоугольники, прямые и кривые, рисунки, взятые из других самостоятельных файлов, и проч. Примитивы иногда состоят из нескольких частей – они называются сегментами. Чтобы нарисовать какой-нибудь примитив, требуется написать координаты, которые укажут его положение на канве. Координаты отсчитывают, начиная от левого верхнего угла канвы; проще говоря, система координат канвы начинается в этом месте. Все координаты на канве задаются в пикселях.