Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Всем у кого не работает. файл wizard.script Ещё одно упоминание Glut32 в строке "if (!VerifyLibFile(dir_nomacro_lib, _T("glut32"), _T("GLUT's"))) return false;" меняем на "if (!VerifyLibFile(dir_nomacro_lib, _T("freeglut"), _T("GLUT's"))) return...
Не получается, емаё
огромное спасибо за подробное объяснение про 3д графику на питоне, в интернете очень мало подобной информации
dobryj den, popytalas otkryt prikreplionnyj fail ctoby posmotret kak rabotaet, no mne ego ne pokazyvaet vydajet osibku. Pochemu?
Очень интересно! ии сайт крутой жалко что умирает(

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

Теперь, когда мы умеем строить линии и кривые, научимся преображать эти детали в более интересные вариации.

Цветные линии.

Для начала мы рисуем линию черным цветом, что задан по умолчанию:

c.moveTo(20,90);
c.lineTo(90,90);
c.stroke();

Теперь мы можем работать с этой линией. Добавим такую строку кода, как «c.strokeStyle = '_';», и запишем в одинарных кавычках желаемый цвет:

c.moveTo(20,90);
c.lineTo(90,90);
c.strokeStyle = 'red';
c.stroke();


Можете выбрать другой цвет. Вот список:
Black
Blue
Brown
Green
Orange
Purple
Red
White
Yellow
Pink
Grey
(Найденные методом научного тыка:
Teal
Aqua
Navy
Fuchsia
Полную палитру можно найти на https://ru.wikipedia.org/wiki/Цвета _HTML. Так же можно вводить в кавычки шестнадцатеричный код (обязательно с «#»), но коды принимает лишь строго указанные в таблице, оттенки другие подобрать не выйдет.)

Две цветные линии.

Есть одна странная вещь, что происходит при отрисовке двух линии разного цвета.
Например, Вы решили задать первую линию зеленого цвета, а затем вторую, чуть поодаль, но уже красную:

c.moveTo(5,5);
c.lineTo(90,5);
c.strokeStyle = 'green';
c.stroke();
 
c.moveTo(20,20);
c.lineTo(90,20);
c.strokeStyle = 'red';
c.stroke();


Однако мы сталкиваемся с ошибкой. Обе линии выходят красного цвета. (В оригинале указано, что обе линии будут алыми. В моем опыте первая линия была куда темнее. Оба цвета просто смешиваются, то есть красный перекрывает зеленый. В ходе обучения лучше придерживаться правил, но, как на меня, – это неплохой путь обойти ограничения в цветовой палитре.)
Чтобы такой ошибки не возникало, когда появляется необходимость построить новую линию, используйте команду «c.beginPath();»:
c.moveTo(5,5);
c.lineTo(90,5);
c.strokeStyle = 'green';
c.stroke();
 
c.beginPath();
c.moveTo(20,20);
c.lineTo(90,20);
c.strokeStyle = 'red';
c.stroke();


Вот мой пример игр с простыми линиями. Телефон с картинкой:
c.moveTo(100,50);
c.lineTo(100,300);
c.lineTo(250,300);
c.lineTo(250,50);
c.lineTo(100,50);
c.stroke();
 
c.beginPath();
c.moveTo(110,60);
c.lineTo(110,270);
c.lineTo(240,270);
c.lineTo(240,60);
c.lineTo(110,60);
c.strokeStyle = 'blue';
c.stroke();
 
c.beginPath();
c.moveTo(160,275);
c.lineTo(160,295);
c.lineTo(190,295);
c.lineTo(190,275);
c.lineTo(160,275);
c.strokeStyle = 'grey';
c.stroke();
 
c.beginPath();
c.moveTo(130,110);
c.lineTo(130,230);
c.strokeStyle = 'pink';
c.stroke();
 
c.beginPath();
c.moveTo(130,230);
c.lineTo(220,110);
c.strokeStyle = 'yellow';
c.stroke();
 
c.beginPath();
c.moveTo(220,110);
c.lineTo(220,230);
c.strokeStyle = 'red';
c.stroke();
 
c.beginPath();
c.moveTo(220,230);
c.lineTo(130,110);
c.strokeStyle = 'purple';
c.stroke();

Заливка.

Чтобы наши фигуры не выглядели такими пустыми, стоит их разукрасить. Код почти не отличается от отрисовки обычной цветной фигуры. Мы задаем саму фигуру, а затем пишем вместо «c.stroke();» вот это – «c.fill();»:

c.moveTo(100,50);
c.lineTo(100,300);
c.lineTo(250,300);
c.lineTo(250,50);
c.lineTo(100,50);
c.fill();


Чтобы задать цвет заливки, используется команда «c.fillStyle='_';»:
c.moveTo(100,50);
c.lineTo(100,300);
c.lineTo(250,300);
c.lineTo(250,50);
c.lineTo(100,50);
c.fillStyle='red';
c.fill();


Теперь телефон будет выглядеть симпатичнее:
c.moveTo(100,50);
c.lineTo(100,300);
c.lineTo(250,300);
c.lineTo(250,50);
c.lineTo(100,50);
c.fill();
 
c.beginPath();
c.moveTo(110,60);
c.lineTo(110,270);
c.lineTo(240,270);
c.lineTo(240,60);
c.lineTo(110,60);
c.fillStyle = 'blue';
c.fill();
 
 
c.beginPath();
c.moveTo(160,275);
c.lineTo(160,295);
c.lineTo(190,295);
c.lineTo(190,275);
c.lineTo(160,275);
c.fillStyle = 'grey';
c.fill();
 
c.beginPath();
c.moveTo(130,110);
c.lineTo(130,230);
c.strokeStyle = 'pink';
c.stroke();
 
c.beginPath();
c.moveTo(130,230);
c.lineTo(220,110);
c.strokeStyle = 'yellow';
c.stroke();
 
c.beginPath();
c.moveTo(220,110);
c.lineTo(220,230);
c.strokeStyle = 'red';
c.stroke();
 
c.beginPath();
c.moveTo(220,230);
c.lineTo(130,110);
c.strokeStyle = 'purple';
c.stroke();


(К сожалению, баг со смешиванием цветов в заливке на работает. Попытка перекрыть синий цвет белым, чтобы получить голубой, с треском провалилась. Но с линиями это все еще работает!)

Текст.

Картинка может заменить тысячу слов, но иногда все же нужно что-то написать. Сейчас мы научимся отображать фразы, для этого используем команду «c.fillText('_’, 90, 90);»:
c.fillText('Hello', 90, 90);

В кавычках мы записываем интересующую нас фразу, а далее координаты расположения по х и у.
Мы так же можем работать с этим текстом. К примеру, изменять размер шрифта:

c.font = '70px serif';
c.fillText('Hello', 90, 90);


Мы используем команду «c.font = '_px serif';», чтобы задать количество пикселей, которому по высоте должно соответствовать слово.
Теперь сменим цвет:
c.fillStyle = 'pink';
c.font = '70px serif';
c.fillText('Hello', 90, 90);


Для этого мы использовали ту же самую функцию, что и при закрашивании фигуры.
По традиции, экспериментальный пример:
c.fillStyle = 'red';
c.font = '70px serif';
c.fillText('R', 90, 90);
 
c.fillStyle = 'orange';
c.font = '70px serif';
c.fillText('a', 135, 90);
 
c.fillStyle = 'yellow';
c.font = '70px serif';
c.fillText('i', 165, 90);
 
c.fillStyle = 'green';
c.font = '70px serif';
c.fillText('n', 185, 90);
 
c.fillStyle = 'teal';
c.font = '70px serif';
c.fillText('b', 220, 90);
 
c.fillStyle = 'blue';
c.font = '70px serif';
c.fillText('o', 253, 90);
 
c.fillStyle = 'purple';
c.font = '70px serif';
c.fillText('w', 285, 90);