|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | Справочники
Главная arrow Программирование arrow Java arrow Как рисовать на Web-странице  

Как рисовать на Web-странице

Оглавление
Как рисовать на Web-странице
Страница 2
Страница 2 из 2

Народ замечает

Интересную штуку придумал автор — он рисует горизонтальные и вертикальные линии, просто растягивая по горизонтали или вертикали рисующую точку. Это и быстрее, чем вырисовывание таких линий поточечно, и компьютерных ресурсов для отображения отнимает много меньше.

Функция jspsDrawRectangle (листинг 6.5) занимается рисованием прямоугольников. Формат ее вызова таков:

jspsDrawLine{<Координата X верхнего левого угла>,<Координата Y верхнего левого угла>,<Координата X нижнего правого угла>,<Координата Y нижнего правого угла> [, <Размер точки>[, <Элемент страницы>]]);

Она использует объявленную ранее функцию jspsDrawLine и не возвращает значения.

Листинг 6.5. Функция jspsDrawRectangle, рисующая на Web странице прямоугольник

function jspsDrawRectangle(x1, y1, х2, у2, pSize, element) {

jspsDrawLine(x1, y1, x2, y1, pSize, element);

jspsDrawLine(x2, y1, x2, y2, pSize, element);

jspsDrawLine(x2, y2, x1, y2, pSize, element);

jspsDrawLine(x1, y2, x1, y1, pSize, element); }

Функция jspsDrawEliipsis (листинг 6.6) рисует на Web-странице эллипс (или, как частный случай эллипса, окружность, в зависимости от заданных параметров). Вот формат ее вызова:

jspsDrawEliipsis(<Координата X центра>, <Координата Y центра>,<Горизонтальный радиуо[, <Вертикальный радиуо[, <Размер точки> [, <Элемент страницьт>] ]]) ;

Все параметры этой функции должны быть понятны без всяких объяснений. Единственное — если Вертикальный радиус не задан, его значение принимается равным горизонтальному радиусу (в результате будет нарисована окружность — вырожденный вариант эллипса).

Функция jspsDrawEliipsis использует объявленную ранее функцию jspsDrawDot для рисования точек, и также не возвращает значения.

Листинг 6.6. Функция jspsnrawEllipsis. рисующая на Web-странице эллипс

function jspsDrawEllipsis(x, у, Rh, Rv, pSize, element)

{

if (!Rv) Rv = Rh;

if (!pSize) pSize = 1;

if (!element) element = document.body;

var rr = Math.PI * 2;

for (var a = 0; a <= rr; a += .02)

jspsDrawDot(x + Rh * Math.sin(a), у + Rv * Math.cos(a), pSize, element); }

Хорошая идея!

Поместите объявление всех функций, выполняющих рисование, и переменной jsps_DD_dotFileName в файл сценариев draw.js. Впоследствии, чтобы использовать их, достаточно будет просто подключить к Web-странице этот файл сценариев с помощью тега:

<SCRIPT SRC="draw.js"x/SCRIPT>

Пример 1

Вот HTML-код Web-страницы, выводящей изображение окружности, вписанного в нее квадрата и вписанного уже в этот квадрат треугольника.

<html>

<HEAD>

<TITLE>Рисование на Web-странице</TITLE> <SCRIPT SRC="draw.js"></SCRIPT>

<!-- Предполагаем, что объявления всех использованных в этом коде функций находятся в файле сценариев draw.js --> </HEAD> <BODY>

<SCRIPT TYPE="text/javascript">

// Задаем имя файла, хранящего "рисующую" точку. Если мы оставим

// старое значение, страница не будет работать правильно без

// Web-сервера

jsps_DD_dotFileName = "dot.gif";

// Рисуем окружность

jspsDrawEllipsis(200, 200, 100, 100);

// Рисуем вписанный в нее квадрат

var h = Math.sin(Math.PI / 4) * 100;

jspsDrawRectangle(200 - h, 200 - h, 200 + h, 200 + h);

// Рисуем вписанный в квадрат треугольник jspsDrawLine(200, 200 - h, 200 - h, 200 + h); jspsDrawLine(200, 200 - h, 200 + h, 200 + h) ; </SCRIPT> </BODY> /HTML>

Пример 2

Этот небольшой сценарий выведет на Web-страницу синусоиду.

var V = 100; var amp = 50; var end = 360;

for (var а = 0; а <= end; a++) jspsDrawDot(a, V - amp * Math.sin(jspsToRad(a)));

Здесь в переменной v хранится отступ от верха страницы до горизонтальной координатной оси, в переменной amp— амплитуда ("размах") нашей сину-соиды, а в переменной end — граничное значение.

Народ предупреждает!

Не забываем о том, что пикселы на экране отсчитываются слева направо, но сверху вниз! Именно поэтому в выражении, вычисляющем вертикальную коор-динатуточки,—V - amp * Math.sin(jspsToRad(a))—стоит знак вычитания.

Внимание!

Приведенный выше пример использует функцию jspsToRad, чье объявление представлено в листинге 1.19.

Что дальше?

Ну вот, с графическими изображениями и связанными с ними эффектами мы при помощи всезнающего народа разобрались. На очереди — гиперссылки и все, что с ними связано. Мы научимся выполнять Web-сценарии в ответ на щелчки по ним, создавать всплывающие подсказки и полосы навигации. За дело!


« Пред. - След.

RLBN.ru - Электроника и компьютеры
0.1357
Hosted by uCoz