Теперь, когда мы умеем строить линии и кривые, научимся преображать эти детали в более интересные вариации.
Цветные линии.
Для начала мы рисуем линию черным цветом, что задан по умолчанию:
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);
