Задание цвета, уровня прозрачности и толщины линий
Во время работы с канвой нам придется задавать цвета линий и заливок, уровень их прозрачности и толщину линий. Это выполняется с помощью особых свойств объекта 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;