Программирование графических приложений, тем более на Javascript- отдельная, большая тема,
подробное изложение которой выходит за рамки поставленной нами задачи -
показать, как можно на JavaScript простейшим образом реализовать некоторые базовые алгоритмы.
И тем не менее, на наш взгляд, описание возможностей любого языка программирования без хотя бы
одного примера работы с графикой, пусть и самой простой, было бы неудовлетворительно.
Приведем вариант программы, строящей на экране график функции Y=X*sin(X) в интервале от Х=-30 до Х=30:
<script type="text/javascript">
document.write(" График функции Y=X*sin(X) при -30 < X < 30 ");
// Задаем position:absolute в стиле для всех div
document.write(" <style>div{position:absolute}</style> ");
// w,h - ширина и высота экрана соответственно; (x0,y0)- координаты центра экрана
w=screen.width; h=screen.height;
x0=w/2; y0=h/2;
// Рисуем координатные оси с центром в (x0,y0)
for (i=1; i<w; i=i+8) document.write( " <div style='top: " +y0+ " ; left: " +i+ " '>_</div> " );
for (i=1; i<h; i=i+8) document.write( " <div style='left: " +x0+ " ; top: " +i+ " '>|</div> " );
// Назначаем коэффициенты масштабирования графика по x (kx) и y (ky)
kx= w/70; ky= h/70;
// График рисовать будем зеленым (font color=green) цветом
document.write("<font color=green>");
// В цикле по х от -30 до 30 с шагом 0.01
for ( x = - 30; x < 30; x = x + 0.01 )
{
// Рассчитываем значения y=x*sin(x)
y=x*Math.sin(x);
// И в соответствующем месте экрана ставим точку
document.write("<div style='left:"+(x0+kx*x)+";top:"+(y0-ky*y +3)+" '>.</div>");
}
</script>
Вы можете выполнить эту программу в новом окне браузера.
Приведем некоторые пояснения к рассмотренной программе.
Она ориентирована на работу в браузере, который визуализирует HML-документ.
В HTML div - один из основных элементов разметки, означает определенную прямоугольную
часть(division) документа.
Элементу div можно задать стиль оформления (style). В стиле, помимо прочего, можно задать координаты
верхнего(top) левого(left) угла элемента div.
Кроме того, в документе можно для всех элементов div задать вид позиционирования, что и происходит
во второй строке нашей программы путем записи выражения:
"<style>div{position:absolute}</style>" в документ.
Отметим, что в графическом режиме экран рассматривают состоящим из пикселов (англ. pixel) -
графических элементов, точек, размер которых и количество зависит от характеристик выбранного режима.
Эти ряды пиксел нумеруются сверху вниз и справа налево, что учтено в нашей программе при
определении координат элементов div, содержащих точку графика:
"<div style='left:"+(x0+kx*x)+";top:"+(y0-ky*y +3)+" '>.</div>"
<<ранее
к оглавлению далее>>
аналог на Fortran
аналог на Basic
аналог на Pascal
аналог на C
Используются технологии
uCoz