Канва для всех: цвет фигур и толщина линий

Продолжаем постигать азы рисования на канве. В прошлой статье мы узнали как нарисовать прямоугольник и произвольную фигуру, используя пути. Сейчас пришло время поговорить об изменении цвета наших фигур.

Раньше все, что мы рисовали заливалось или вычерчивалось черным цветом. Пришло время узнать как изменить цвет на любой другой. Сделать это можно изменяя специальные свойства двумерного контекста для рисования — fillStyle и strokeStyle.

Попробуем залить квадрат каким-либо цветом:

ctx.fillStyle = "rgb(255, 0, 0)";  
ctx.fillRect(50, 50, 100, 100);

Этот код нарисует красный квадрат:

Красный квадрат на канве

Красный квадрат на канве


Цвет можно задавать практически любым доступным способом. Также, как задаете цвет в CSS.
Можно написать ctx.fillStyle = «#f00″, или ctx.fillStyle = «#ff0000″, или ctx.fillStyle = «red». Как Вам удобнее :)
Обратите внимание на то, что цвет, установленный в этом свойстве применяется только к фигурам, нарисованным после его установки. Например, нарисовав черный прямоугольник, Вы сменили цвет на красный. Следующий нарисованный треугольник будет красным, а предыдущий останется черным. Думаю, многим этот момент итак очевиден :)

Идем дальше. Попробуем теперь изменить толщину линий, которыми прочерчивается путь. Сделать это можно просто установив нужное значение свойству lineWidth контекста канвы:

ctx.lineWidth = 20;  
ctx.strokeStyle = "rgb(255, 0, 0)";  
ctx.strokeRect(50, 50, 100, 100);

Такой код нарисует вот такую фигуру:

Квадрат, вычерченный линией толщиной в 20 пикселей на канве

Квадрат, вычерченный линией толщиной в 20 пикселей на канве


С толщиной линий и цветом фигур разобрались, в следующей статье мы научимся стирать то, что нарисовали :)

Запись опубликована в рубрике HTML & CSS с метками , , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">