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

Вход на сайт

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

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

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

torrvic, возможно, Вам нужно добавить -lGLU
Извините за тупой вопрос. У меня при сборке Вашего примера выходит ошибка: "undefined reference to gluLookAt". Не могу найти в какой библиотеке находится эта функция. У меня задано: -lGL -lglut ... Искал в /usr/lib таким образом: nm lib*so* | grep...
Здравствуйте. Спасибо за проект. У меня вопрос, по какой причине определение принадлежности точки многоугольнику работает некорректно, если координаты из больших чисел состоят, например: int[] vertex = new int[] {...
Сейчас проверила нашла причину не запускания // Создание контекста воспроизведения OpenGL и привязка его к панели на форме OpenGLControl1:=TOpenGLControl.Create(Self); with OpenGLControl1 do begin Name:='OpenGLControl1'; //вот тут...
Ну..кажется что то пошло не так http://pp.usera...

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

Рейтинг@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);

Комментарии

admin аватар
Опубликовано admin в 3. Апрель 2017 - 9:13.

Необходимо дополнение, как все это запустить, Где писать все эти команды, чтобы видеть результат. Я имею ввиду, что необходимо продемонстрировать полный код HTML-страницы со скриптом и тегами холста. Может даже сделать Урок 0 "Как начать рисовать в HTML5", поскольку в первом уроке тоже пропущено это самое важное для начинающего пользователя введение.