Графика в HTML | Все об HTML: Компания VBizSoft: IT консалтинг и разработка решений для бизнеса

Контакты

+ 996 312 46 07 70
(прямой)
+ 996 555 55 03 11

Мы рады вашему звонку!

CMS Joomla!

Скачать

Авторизация

Графика в HTML

Внимание! Работает только в Internet Explorer!

Список графических средств Html весьма внушителен.

Мы сейчас рассмотрим всего лишь одну из возможностей изображения некоторых графических фигур в HTML.

Система координат

Начало отсчета координат – это верхний левый угол экрана, т.е.

X (0..800)

Y (0..600)

Координаты можно задавать в различных единицах. Пока будем мерить в пунктах. Координаты по X – от 0 до 800. Координаты по Y – от 0 до 600.

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

Чтобы подготовить броузер к восприятию графических элементов надо кое-что поместить в начало HTML-файла:

<html>
xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta  HTTP-equiv=Content-Type content="text/html; charset=windows-1251">
<style>
v\:* {behavior: URL(#default#VML); position:absolute;}
</style>
</head>
<body lang=RU>
<div>
...Здесь наша графика...
</div>
</body>
</html>

Графические элементы

Линия

Задается тегом <V:LINE>. Имеет закрывающий тег.

Атрибуты

FROM. Координаты начала линии в пунктах.
TO. Координаты конца линии в пунктах.
STROKEWEIGTH. Ширина линии в пунктах. По умолчанию – тонкая линия.

STROKECOLOR. Цвет линии. По умолчанию – черный.

Пример

<v:line from="0,0" to="200,60"
	strokeweight="1.5pt" strokecolor="#00FF00">
</v:line>

Обратите внимание на то, что обозначение пунктов ( pt) необходимо в значении атрибута STROKEWEIGTH, но необязательно в FROM и TO.

Ломаная линия

Задается тегом <V:POLYLINE>. Имеет закрывающий тег.

Атрибуты

POINTS. Координаты точек линии в пунктах.
STROKEWEIGTH. Ширина линии в пунктах.
STROKECOLOR. Цвет линии.
FILLED. Заливка. Принимает значения "f" (нет заливки) или "t" (есть заливка). По умолчанию "t".

FILLCOLOR. Цвет заливки. По умолчанию – белый.

Пример

<v:polyline points="0,5,300,50,500,10,600,40"
	strokeweight="3pt" strokecolor="#FF0000"
	filled="f">
</v:polyline>

Прямоугольник

Задается тегом <V:RECT>. Имеет закрывающий тег.

Атрибуты

STYLE. Задает отступ слева (MARGIN-LEFT), отступ сверху (MARGIN-TOP) для левого верхнего угла прямоугольника, а также ширину (WIDTH) и высоту (HEIGHT).

STROKEWEIGTH, STROKECOLOR, FILLED, FILLCOLOR. Аналогичны одноименным атрибутам тега <V:POLYLINE>.

Пример

<v:rect style="margin-left:5;margin-top:5;width:350;height:40"
	fillcolor="yellow"strokeweight="1.5pt"
	strokecolor="fuchsia">
</v:rect>

Эллипс

Задается тегом <V:OVAL>. Имеет закрывающий тег.

Атрибуты

STYLE. Задает отступ слева (MARGIN-LEFT), отступ сверху (MARGIN-TOP) для левого верхнего угла прямоугольника, описанного вокруг эллипса, а также его ширину (WIDTH), и высоту (HEIGHT).

STROKEWEIGTH, STROKECOLOR, FILLED, FILLCOLOR. Аналогичны одноименным атрибутам тега <V:RECT>.

Пример

<v:oval style="margin-left:100;margin-top:2;width:100;height:50"
fillcolor="silver" strokeweight="1.5pt"
strokecolor="red">
</v:oval>

Виды линий

Задаются тегом <V:STROKE>. Помещается в контейнер <V:LINE>…</V:LINE>, <V:POLYLINE>…</V:POLYLINE> и т.д. Не имеет закрывающего тега, но обязательно перед закрывающей угловой скобкой ставится знак /.

Атрибуты

DASHSTYLE. Вид штриховой линии. Может принимать значения: "DASH" (штрих), "LONGDASH" (длинный штрих), "DASHDOT" (штрих-пунктир), "LONGDASHDOT" (длинный штрих-пунктир).
LINESTYLE. Вид двойной линии. Может принимать значения: "THINTHIN" (две тонкие линии), "THINTHICK" (тонкая линия над толстой), "THICKTHIN" (тонкая линия под толстой), "THICKBETWEENTHIN" (толстая линия между тонкими). Надо иметь в виду, что каждый из этих видов требует также задания определенной суммарной ширины линии.
STARTARROW. Вид стрелки в начале линии. Может принимать значения: "CLASSIC" (обычная стрелка), "OPEN"(тонкая стрелка), "BLOCK" (треугольная стрелка), "OVAL"(овальчик), "DIAMOND" (ромбик).
STARTARROWWIDTH. Ширина стрелки. Может принимать значения: "WIDE" (широкая), "NARROW" (узкая). По умолчанию – средняя ширина.
STARTARROWLENGTH. Длина стрелки. Может принимать значения: "LONG" (длинная), "SHORT" (короткая). По умолчанию – средняя длина.

ENDARROW, ENDARROWWIDTH, ENDARROWLENGTH. Вид, ширина и длина стрелки на конце линии. Аналогичны атрибутам STARTARROW, STARTARROWWIDTH,STARTARROWLENGTH.

Примеры

<!-- пунктирная линия -->
<v:line from="30,3" to="600,3"
strokeweight="1.5pt" strokecolor="#0000FF">
<v:stroke dashstyle="Dash"/>
</v:line>

<!-- штрих-пунктирная линия -->
<v:line from="30,3" to="600,3"
strokeweight="1.5pt" strokecolor="#00FF00">
<v:stroke dashstyle="DashDot"/>
</v:line>

<!-- длинная пунктирная линия -->
<v:line from="30,3" to="600,3"
strokeweight="1.5pt" strokecolor="#00FFFF">
<v:stroke dashstyle="longDash"/>
</v:line>

<!-- длинная штрих-пунктирная линия -->
<v:line from="30,3" to="600,3"
strokeweight="1.5pt" strokecolor="#FF00FF">
<v:stroke dashstyle="longDashDot"/>
</v:line>

<!-- двойная линия 1 -->
<v:line from="30,3" to="600,3" strokeweight="3pt">
<v:stroke linestyle="thinThin"/>
</v:line>

<!-- двойная линия 2 -->
<v:line from="30,3" to="600,3" strokeweight="3pt">
<v:stroke linestyle="thinThick"/>
</v:line>

<!-- тройная линия -->
<v:line from="30,3" to="600,3" strokeweight="4.5pt">
<v:stroke linestyle="thickBetweenThin"/>
</v:line>

<!-- стрелка в виде маленького треугольника -->
<v:line from="30,3" to="600,3">
<v:stroke endarrow="block"
endarrowwidth="narrow" endarrowlength="short"/>
</v:line>

<!-- классическая стрелка -->
<v:line from="30,3" to="600,3">
<v:stroke endarrow="classik"/>
</v:line>

<!-- тонкая длинная стрелка -->
<v:line from="30,3" to="600,3">
<v:stroke endarrow="open"
endarrowwidth="wide" endarrowlength="long"/>
</v:line>

Виды заливок

Задаются тегом <V:FILL>. Помещается в контейнеры <V:POLYLINE>…</V:POLYLINE>, <V:RECT>…</V:RECT> и т.д. Не имеет закрывающего тега, но обязательно перед закрывающей угловой скобкой ставится знак /.

Атрибуты

TYPE. Тип заливки. Может принимать значения: "PATTERN" (узор), "TILE" (текстура), "GRADIENT" (градиентная заливка).
SRC. Имя GIF-файла образца заливки. Для узора и текстуры.
COLOR2. Цвет фона.
FOCUS. Центр распространения заливки. Может принимать значения от "-100%" до "100%". Для градиентной заливки.

ANGLE. Угол наклона заливки. Может принимать значения от "-90" до "90". Для градиентной заливки.

Примеры

<!-- узор -->
<v:rect style="margin-left:5;margin-top:2;width:350;height:40"
fillcolor="#FF0000"strokeweight="1.5pt"strokecolor="#00FF00">
<v:fill src="fill1.gif" type="pattern" color2="#00FF00"/>

<!-- градиентная заливка -->
<v:rect style="margin-left:5;margin-top:2;width:350;height:40"
fillcolor="green">
<v:fill angle="45" focus="-50%" type="gradient"/>
</v:rect>

<!-- текстура -->
<v:rect style="margin-left:5;margin-top:2;width:350;height:40">
<v:fill src="fill2.gif" type="tile"/>
</v:rect>

Тег canvas набирает популярность, поскольку позволяет создавать 2-х мерную графику при помощи JavaScript. Однако отсутствие поддержки со стороны Internet Explorer значительно тормозит дальнейшее его продвижение. Существует готовый скрипт ExplorerCanvas, который добавляет поддержку этого тега в IE используя возможности Vector Markup Language (VML).

Подключать скрипт можно только для IE используя условное подключение:

<!--[if IE]>
< Script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

Меню

Контакты

CMS Joomla!

Скачать

Авторизация

Новости антивируса Dr. Web

Наши партнёры