Задание цвета, уровня прозрачности и толщины линий

 

Во время работы с канвой нам придется задавать цвета линий и заливок, уровень их прозрачности и толщину линий. Это выполняется с помощью особых свойств объекта CanvasRenderingContext2D.

Свойство strokeStyle задает цвет линий контура. Все фигуры, которые мы впоследствии нарисуем, будут иметь контур данного цвета. Цвет задают в виде строки либо с именем цвета, либо в привычном нам формате #RRGGBB, либо в двух других форматах, которые мы сейчас рассмотрим.

Вот первый формат:

rgb(<красная составляющая>, <зеленая составляющая>, <синяя составляющая> )

Здесь все три составляющие цвета имеют вид десятичных чисел от 0 до 255.

Второй формат позволяет дополнительно задать уровень прозрачности рисуемых линий:

rgba(<красная составляющая>, <зеленая составляющая>,<синяя составляющая>, <уровень прозрачности> )

Три составляющие цвета также представляют собой десятичные числа от 0 до 255. Уровень прозрачности задают в виде числа от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Все четыре выражения задают непрозрачный красный цвет линий контура:

ctxCanvas.strokeStyle = "red"; ctxCanvas.strokeStyle = "#FF0000"; ctxCanvas.strokeStyle = "rgb(255, 0,0)"; ctxCanvas.strokeStyle = "rgb(255, 0, 0, 1)";

А вот выражение, задающее для линий контура полупрозрачный черный цвет:

ctxCanvas.strokeStyle = "rgb(0, 0, 0, 0.5)";

Изначально, сразу после загрузки и вывода канвы на Web-страницу, линии контура будут иметь черный цвет.

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

Вот выражение, задающее тускло-зеленый непрозрачный цвет заливки:

ctxCanvas.fillStyle = "rgb(0, 127, 0)";

Еще один пример иллюстрирует листинг 22.1.

 








Дата добавления: 2015-05-08; просмотров: 836;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.002 сек.