Як малювати на web-сторінці
Функція jspsDrawRectangle (лістинг 6.5) займається малюванням прямокутників. Формат її виклику такий:
jspsDrawLine
Вона використовує оголошену раніше функцію 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 (! 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);>
Ось HTML-код Web-сторінки, що виводить зображення кола, вписаного в неї квадрата і вписаного вже в цей квадрат трикутника.
// Задаємо ім'я файлу, що зберігає "малює" точку. Якщо ми залишимо
// старе значення, сторінка не буде працювати правильно без
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);