Урок - Работа с цветом.

Главная » Курсы » Курс HTML5 Canvas » Урок - Работа с цветом.

Обучающий онлайн курс
HTML5 Canvas

Лицензия: Копирование запрещено.

Цвет заливки и линий.

Что бы наше изображение было не только двух цветов, а любого цвета, предусмотрено два свойства:

  • fillStyle - определяет цвет заливки.
  • strokeStyle - цвет линий.

Цвет задается точно так же как и css, на примере все четыре способа задания цвета. Все четыре строки задают оранжевый цвет заливки.

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)"

аналогично задаётся и цвет для линий.

Используя метод fillRect, вы можете нарисовать прямоугольник с заливкой. С помощью метода strokeRect вы можете нарисовать прямоугольник только с границами, без заливки. Если нужно очистить некоторую часть канвы, вы можете использовать метод clearRect. Три этих метода используют одинаковый набор аргументов: x, y, width, height. Первые два аргумента задают координаты (x,y), а следующие два — ширину и высоту прямоугольника.

Для изменения толщины линий можно использовать свойство lineWidth.

Пример использования функций fillRect, strokeRect, clearRect:

context.fillStyle = '#00f';
// bluecontext.strokeStyle = '#f00';
// redcontext.lineWidth = 4;
// Draw some rectangles.context.fillRect (0, 0, 150, 50);
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);

Этот пример приведет к следующему результату:

пример

Следующий код демонстрирует рисование треугольника:

// Задаем свойства заливки и линий.context.fillStyle = '#00f';
context.strokeStyle = '#f00';
context.lineWidth = 4;
context.beginPath();
// Начинаем рисовать треугольник с верхней левой точки.
context.moveTo(10, 10); 
// перемещаемся к координатам (x,y)
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
// Заполняем фигуру заливкой и применяем линии
// Фигура не будет отображена, пока не будет вызван хотя бы один из этих методов.
context.fill();
context.stroke();
context.closePath();

Этот пример будет отображен в браузере следующим образом:

пример

Тени

Shadow API предоставляет четыре свойства:

  • shadowColor - определяет цвет тени. Значения допустимы в том же формате, что и в CSS.
  • shadowBlur - Определяет степень размытия тени в пикселях. Эффект очень похож на гауссово размытие в Photoshop.
  • shadowOffsetX и shadowOffsetY - определяет сдвиг тени в пикселях (x, y).

Пример создание тени у объекта на Canvas:

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(255, 0, 0, 0.5)';
context.fillStyle = '#00f';
context.fillRect(20, 20, 150, 100);

Так будет выглядеть пример тени в браузере:

пример

Градиенты

Свойства fillStyle и strokeStyle также могут иметь значения CanvasGradient вместо обычных цветов CSS — это позволяет использовать градиенты для линий и заливок.

Для создания объектов CanvasGradient можно использовать два метода: createLinearGradient и createRadialGradient. Первый метод создает линейный градиент, а второй — радиальный градиент.

Как только создан объект градиента, можно добавлять в него цвета с помощью метода addColorStop.

Следующий пример показывает, как использовать градиенты:

// Нужно указать начальные и конечные координаты (x,y) градиента
var gradient1 = context.createLinearGradient(sx, sy, dx, dy);
// Теперь можно добавлять цвета в градиент
// Первый градиент определяет позицию для цвета в градиенте.
// Допустимы значения от 0 (начало градиента) до 1 (конец градиента).
gradient1.addColorStop(0, '#f00');
// красныйgradient1.addColorStop(0.5, '#ff0');
// желтыйgradient1.addColorStop(1, '#00f');
// синий
// Для радиального градиента также нужно указать радиус
// внутренней и внешней окружности градиента.
// Координаты (x,y) определяют центры этих окружностей.
var gradient2 = context.createRadialGradient(sx, sy, sr, dx, dy, dr);

Давайте сделаем линейный градиент. Градиенты могут быть любого размера, но я сделаю этот градиент шириной 300 пикселей, как и холст. Создание градиентного объекта

var my_gradient = context.createLinearGradient(0, 0, 300, 0);

Поскольку значения у второго и четвертого параметра равно 0, этот градиент будет заполнен слева направо. После того как мы получили градиентный объект, мы можем определить цвета градиента. Градиент имеет два или более цвета остановки, которые могут быть в любом месте вдоль градиента. Чтобы добавить цвет остановки, необходимо указать его позицию вдоль градиента, она может быть от 0 до 1. Давайте определим градиент от черного цвета к белому.

my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");

Определение градиента не рисует что-либо на холсте, это просто объект, спрятанный где-то в памяти. Чтобы нарисовать градиент, установите fillStyle в градиент и нарисуйте фигуру вроде прямоугольника или линии. Стиль заполнения градиентом

context.fillStyle = my_gradient;context.fillRect(0, 0, 300, 225);

И вот результат.

градиент

Предположим, вы хотите градиент сверху вниз. Когда вы создаете градиентный объект, оставьте значения x (первый и третий параметр) постоянными и сделайте значения y (второй и четвертый параметр) в диапазоне от 0 до высоты холста. Значения x равны 0, значения y меняются

var my_gradient = context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

И вот результат.

градиент

Вы также можете сделать градиент по диагонали. Оба значения x и y меняются

var my_gradient = context.createLinearGradient(0, 0, 300, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

Вот результат.

градиент

Ниже показан более сложный пример, в котором использованы линейный градиент, тени и текст:

пример

Прозрачность

Кроме рисования непрозрачных фигур, мы также можем нарисовать полупрозрачные. Это можно сделать, задав значение globalAlpha или мы можем установить полупрозрачный цвет обводки и/или заливки.

globalAlpha = значение прозрачности

Это свойство применяет значение прозрачности ко всем фигурам, рисуемым на холсте (canvas). Допустимое значение может быть от 0.0 (полностью прозрачный) до 1.0 (непрозрачный). По умолчанию, прозрачность равна 1.0 (непрозрачный).

Свойство globalAlpha может быть полезно если вы хотите нарисовать множество фигур с одинаковой прозрачностью. Я думаю, однако, что следующий вариант немного более практичнее.

Из-за того, что к strokeStyle и fillStyle могут быть применены значения цветов из CSS 3, мы можем использовать следующую запись для установки прозрачного цвета.

// Добавление прозрачности в цвет обводки и заливки ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";

Функция rgba() похожа на rgb(), за исключением дополнительного параметра. Последний параметр устанавливает значение прозрачности цвета. Допустимое значение - снова между 0.0 (полностью прозрачный) и 1.0 (непрозрачный).

Задание для самостоятельной работы

111111111

Нарисовать "розу ветров" по следующим данным:

Направление Кол-во дней
С 4
С-В 7
В 2
Ю-В 3
Ю 3
Ю-З 6
З 5
С-З 1
Задание 1. Нарисовать флаг Лаоса. Задание 2. Нарисовать "мыльные пузыри" с градиентной заливкой и тенью (тень сделать полупрозрачной). ۞ → Читать Урок Работа с цветом.. rectExample Обновите браузер ۞ → Читать Урок Работа с цветом.. rectExample Обновите браузер */ ?>

Применение стилей и цветов

Источник: https://developer.mozilla.org/ru/Обучение_canvas/Применение_стилей_и_цветов
В главе о рисовании фигур я использовал установленные по умолчанию типы линии и заливки. В этой главе мы рассмотрим все имеющиеся в нашем распоряжении возможности холста, с помощью которых можно сделать наши рисунки чуть более привлекательными.

Цвета

До сих пор мы рассматривали методы относящиеся к построению графических элементов. Если для оформления фигур мы захотим использовать цвета, то для этого есть два основных свойства, которыми мы можем воспользоваться: fillStyle и strokeStyle.
fillStyle = цвет
strokeStyle = цвет


strokeStyle используется установки цвета обводки фигуры а fillStyle установки цвета заливки. цвет может быть строкой, представляющей цвет в CSS формате, или объектом, представляющим градиент, или объектом, представляющим узор. Мы рассмотрим объекты градиентов и узоров позже. По умолчанию цвет контура и заливки - черный (значение в формате CSS #000000).

Допустимыми значениями строк, кторые вы можете вводить, в соответствии со спецификацией, будут значения цветов CSS3. Все приведенные ниже примеры описывают один и тот же цвет.

// все эти выражения установят fillStyle в значение 'orange'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";


Примечание:На данный момент не все значения цветов CSS 3 поддерживаются Gecko платформой. Например значения цветов hsl(100%,25%,0) or rgb(0,100%,0)не допускаются. Если вы будете придерживаться примеров выражений, приведенных выше, то вы не будете сталкиваться с проблемами.

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

Пример fillStyle
В этом примере я снова использую два цикла for для рисования сетки из квадратов, каждый из которых разного цвета. Результирующее изображение может выглядеть приблизительно так, как показано на рисунке. В приведенном примере нет ничего сверхъестественного. Я использовал две переменные i и j чтобы сгенерировать уникальный RGB цвет для каждого из квадратов. Я просто изменил значения красного и зеленого каналов. Синий канал имеет фиксированное значение. Модифицируя каналы вы можете создавать любые палитры. Увеличивая количество шагов вы можете получить палитру, подобную той, что используется в Photoshop.
цвет
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (i=0;i<6;i++){
for (j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}


Пример strokeStyle
Этот пример похож на тот, что вы видели выше, но сейчас используется свойство strokeStyle. Здесь я использую метод arc для того, чтобы нарисовать круги вместо квадратов.
круги
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (i=0;i<6;i++){
for (j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
}

Прозрачность

Кроме рисования непрозрачных фигур, мы также можем нарисовать полупрозрачные. Это можно сделать, задав значение globalAlpha или мы можем установить полупрозрачный цвет обводки и/или заливки.

globalAlpha = значение прозрачности

Это свойство применяет значение прозрачности ко всем фигурам, рисуемым на холсте (canvas). Допустимое значение может быть от 0.0 (полностью прозрачный) до 1.0 (непрозрачный). По умолчанию, прозрачность равна 1.0 (непрозрачный).
Свойство globalAlpha может быть полезно если вы хотите нарисовать множество фигур с одинаковой прозрачностью. Я думаю, однако, что следующий вариант немного более практичнее.
Из-за того, что к strokeStyle и fillStyle могут быть применены значения цветов из CSS 3, мы можем использовать следующую запись для установки прозрачного цвета.

// Добавление прозрачности в цвет обводки и заливки
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";


Функция rgba() похожа на rgb(), за исключением дополнительного параметра. Последний параметр устанавливает значение прозрачности цвета. Допустимое значение - снова между 0.0 (полностью прозрачный) и 1.0 (непрозрачный).

Пример globalAlpha
В этом примере я нарисовал фон из четырёх квадратов различных цветов. Над ними я нарисовал несколько полупрозрачных кругов. Свойство globalAlpha равно 0.2 и оно будет применяться ко всем фигурам. Каждый шаг в цикле for рисует круг с увеличивающимся радиусом. Конечный результат - это плавный переход цвета между кругами. Накладывая ещё больше кругов друг на друга, мы фактически уменьшаем прозрачность кругов, которые уже были нарисованы. Увеличивая количество шагов, и в результате получая больше кругов, фон может быть полностью скрыт из центра изображения.
globalalpha
Замечания: Этот пример не работает как надо в Safari, так как цвет задан не совсем корректно. Цвет в коде примера задан как '#09F)', что неправильно, если следовать спецификации. Firefox, однако, разрешает "плохие" значения цветов.

 function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
// рисуем фон
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,150,150);
ctx.fillStyle = '#FFF';

// устанавливаем значение прозрачности
ctx.globalAlpha = 0.2;

// рисуем полупрозрачные круги
for (i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
}


Пример использования rgba()
Во втором примере я сделал что-то похожее, но вместо рисования кругов друг над другом, я нарисовал маленькие квадраты с различной прозрачностью. Использование rgba() даёт вам немного больше контроля и гибкости, потому что мы можем задать цвет заливки и обводки раздельно.
rgba
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');

// Рисуем фон
ctx.fillStyle = 'rgb(255,221,0)';
ctx.fillRect(0,0,150,37.5);
ctx.fillStyle = 'rgb(102,204,0)';
ctx.fillRect(0,37.5,150,37.5);
ctx.fillStyle = 'rgb(0,153,255)';
ctx.fillRect(0,75,150,37.5);
ctx.fillStyle = 'rgb(255,51,0)';
ctx.fillRect(0,112.5,150,37.5);

// Рисуем полупрозрачные квадраты
for (i=0;i<10;i++){
ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
for (j=0;j<4;j++){
ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
}
}
}