Уроки и упражнения



Рисование

Для рисования в нашей системе имеется встроенный объект draw. draw может нарисовать систему координат, провести отрезок между любыми двумя точками, нарисовать окружность и прямоугольник, а также закрасить окружность или прямоугольник и даже любую область, ограниченную замкнутой линией. Для начала рассмотрим следующие методы объекта draw:

system(width, color),
line(matrix, width, color),
circle(vector, radius, width, color),

Попробуйте все эти методы, начнём с системы координат:

draw.system(1, 'black');

Теперь попробуем нарисовать отрезок, но для этого надо сначала задать концы отрезка. В теме "Классы" мы упоминали, что концы отрезка удобно задавать с помощью матрицы. Для создания матрицы сначала нужно создать класс pair:

pair = {x:,y:};

Теперь создадим матрицу. Допустим мы хотим провести отрезок из точки (-3, 2) в точку (4, -3). Для этого создадим следующую матрицу:

matrix = pair(pair(-3,2), pair(4,-3));

Теперь мы готовы к рисованию отрезка:

draw.line(matrix, 2, 'red');

Для разнообразия сделаем красный отрезок.
Присмотритесь к следующей программе:

pair = {x:,y:};
n=0;
while(n < 1000){
  mx=math.random()*10-5;
  my=math.random()*6-3;
  draw.circle(pair(mx,my),0.03,2,'blue');
  n=n+1;
}
Эта программа использует многое из того, что мы с Вами изучили в процессе всего курса.
Вот полный список всех методов объекта draw:

system(width, color),
line(matrix, width, color),
rect(matrix, width, color),
circle(vector, radius, width, color),
triangle(matrix3, width, color),
fillrect(matrix, color),
filltriangle(matrix3, color),
fillcircle(vector, radius, color),
clear().

При рисовании прямоугольника, первый столбец матрицы указывает на положение левого нижнего угла прямоугольника, а второй столбец задаёт его ширину и высоту. Для рисования треугольника triangle(matrix3, width, color) требуется задать и передать методу три точки, вершины треугольника, на плоскости. Для этого мы используем матрицу matrix3 в три колонки. Создадим сначала два класса

pair = {x:,y:};
triple = {x:,y:,z:};

теперь с их помощью мы создаём матрицу в три колонки:

matrix3 = triple(pair(1,2), pair(-2,3), pair(4,-3));

эта матрица передаётся в метод draw.triangle(). Итак, чтобы получить изображение треугольника на графической панели, нужно выполнить следующую программу:

pair = {x:,y:};
triple = {x:,y:,z:};
matrix3 = triple(pair(1,2), pair(-2,3), pair(4,-3));
draw.triangle(matrix3, 2, 'blue');

получим треугольник синего цвета с вершинами в точках (1, 2), (-2, 3), (4, -3). Если вместо последней команды мы поставим команду

draw.filltriangle(matrix3,'blue');

то получим закрашенный синим цветом треугольник, в этом методе аргумент width, толщина линии, уже не нужен.
Команда

draw.clear();

полностью очищает графическую панель.
Проектирование/Окно программирования
Your browser does not support the HTML5 canvas tag.