Поиск по сайту

PHP Поиск

- Клиника Маршака - психологический вывод из запоя капельница с гарантией - Методы психотерапии.

- Экран электронной книги является одним из самых важных составляющих. Поэтому к его выбору выдвигается огромный список требований.

Графика в 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>

<!-- двойная линия 3 -->
<v:line from="30,3" to="600,3" strokeweight="3pt">
<v:stroke linestyle="thickThin"/>
</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]-->

Скачать с sourceforge.net

Читать дальше: WML

Содержание:

Новое за неделю

Вся история

Сейчас на сайте: 390

Web-технологии

HTML, DHTML, JavaScript, PHP, MySQL, XML+XSLT, Ajax

Поиск по сайту

PHP Поиск

Графика в HTML

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

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

Линия

Атрибуты

Пример

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

Атрибуты

Пример

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

Атрибуты

Пример

Эллипс

Атрибуты

Пример

Виды линий

Атрибуты

Примеры

Виды заливок

Атрибуты

Примеры

Популярное:

Содержание:

Новое за неделю