С использованием цветов и градиентов с тегом Canvas HTML5 - манекенами

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

Применение цветов с тегом canvas HTML5

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

Шестизначные шестнадцатеричные значения: Шестидисковая шестнадцатеричная схема, обычно используемая в CSS, использует две цифры для красного, зеленого и синего. Значение начинается с знака фунта. Например, # FF0000 - красный, а # FFFF00 - желтый.
Трехзначные шестнадцатеричные значения: Значения хеш-цвета часто используют повторяющиеся значения, поэтому вы можете сократить эти значения в виде трехзначных чисел. В этой схеме красный - # F00, а желтый - # FF0.
Имена цветов: Вы можете часто использовать названия цветов, такие как «красный» или «желтый». «Обычные имена цветов обычно будут работать, но не все браузеры поддерживают один и тот же список имен цветов; «Папайя хлыст» вряд ли будет поддерживаться.
Значения RGB и RGBA: Вы можете использовать функцию rgb () для создания цветов с использованием целых чисел (0-255) или процентов (0% -100%). Красный - rgb (255, 0, 0), а желтый - rgb (100%, 100%, 0%). Обратите внимание, что функция rgb должна идти в кавычках, как и любое другое значение цвета. Если вы хотите включить альфу, добавьте четвертый параметр, который является значением нуля. Прозрачным красным будет rgba (255, 0, 0, 0. 5).
HSL и HSLA: Новые форматы hsl и hsla должны поддерживаться элементом canvas, но пока поддержка этих функций зависит от браузера.

Обратите внимание, что различные значения для цвета всегда заключены в кавычки. Параметр цвета - это строка, которая может быть интерпретирована как цвет CSS.

Применение градиентов с тегом canvas HTML5

Вы также можете заполнить фигуру градиентом. Градиенты холста определяются в два этапа:

Создать объект градиента. Для этого в объект контекста встроены два метода. Один строит линейные градиенты, а другой строит радиальные градиенты.
Добавить цветовые остановки. A остановка цвета - это особый элемент, который указывает цвет, добавляемый в градиент. Вы можете добавить столько цветов, сколько хотите, и вы также можете указать, где по шаблону градиента появится цвет.

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

function draw () {var drawing = document. getElementById ("рисунок"); var con = рисунок.getContext ("2d"); // построим линейный градиент lGrad = con. createLinearGradient (0, 0, 100, 200); lGrad. addColorStop (0, "# FF0000"); lGrad. addColorStop (.5, "# 00FF00"); lGrad. addColorStop (1, "# 0000FF"); против. fillStyle = lGrad; против. fillRect (0, 0, 100, 200); // построим радиальный градиент rGrad = con. createRadialGradient (150, 100, 0, 150, 100, 100); rGrad. addColorStop (0, "# FF0000"); rGrad. addColorStop (.5, "# 00FF00"); rGrad. addColorStop (1, "# 0000FF"); против. fillStyle = rGrad; против. fillRect (100, 0, 200, 200);} // end draw

Результат этого кода показан здесь:

График linear - это шаблон цветов, которые сливаются друг с другом по прямолинейному пути. Чтобы определить линейный градиент, выполните следующие действия:

Создайте переменную для удержания градиента.

Градиенты немного сложнее, чем простые цвета, поэтому они хранятся в переменных, которые нужно повторно использовать.
Создайте градиент, используя метод createLinearGradient () объекта контекста для создания линейного градиента.
Определите путь градиента с помощью метода createLinearGradient ().

Он ожидает четыре параметра, которые определяют линию (x1, y1, x2, y2). Цвета будут перпендикулярны этой линии, поэтому, если вы хотите горизонтальные полосы цвета, нарисуйте вертикальную линию. Если вы хотите вертикальные полосы цвета, нарисуйте горизонтальную линию. Строка обычно занимает всю ширину или высоту элемента, но это не обязательно. Если линия меньше изображения, для области избытка автоматически присваивается цвет от ближайшего конца градиента.
Добавить цветовые остановки.

Градиенты не очень приятны без цветов. Метод addColorStop () объекта градиента позволяет добавить цвет к градиенту. Каждая остановка цвета имеет два параметра: положение и цвет. Позиция - это значение 0-1, указывающее, где на градиентной линии должен быть установлен цвет. 0 - начало, 1 - конец, а промежуточные значения - в середине. Параметр цвета представляет собой текстовое значение, которое можно оценить как цвет CSS. Как минимум, вы должны определить две цветовые остановки, одну для начала и одну для конца.
Применить градиент как шаблон заполнения.

Если вы хотите использовать градиент в качестве шаблона заполнения, установите fillStyle контекста в только что созданную градиентную переменную. Все последующие заливки будут выполняться с использованием шаблона градиента (до тех пор, пока fillStyle не будет изменен на другое).

Радиальные градиенты схожи. Вместо того, чтобы рисовать градиент по прямой линии, они рисуют ряд круговых цветных полос. Первый цвет - это центр круга, а последний цвет определяет внешний радиус. Построение радиального градиента очень похоже на построение линейного градиента. Единственное отличие - команда create.

Используйте метод createRadialGradient () объекта console для создания радиального градиента. Эта команда фактически принимает шесть параметров:

beginX : Позиция X начальной точки. Это часто находится в центре вашей формы.
beginY : Наряду с beginX это определяет начальную позицию вашего градиента.
beginRadius : Радиус вашего круга. Обычно это ноль, но вы можете сделать его больше, если хотите подчеркнуть цвет центра больше.
endX : Описывает положение X конечной окружности. Как правило, это то же самое, что и beginX.
endY : Наряду с endX определяет положение конечного круга. Если начальные и конечные круги имеют одинаковые позиции, вы получите круговой градиент. Измените конечную позицию, чтобы растянуть градиент в определенном направлении.
endRadius : Конечный радиус определяет, где будет размещен последний градиент цвета. Меньшие значения для этого радиуса приведут к плотно сгруппированному градиенту, а большие значения будут распространять градиент вдоль большей области.

После определения градиента метод addColorStops () работает точно так же, как и для линейных градиентов. Переменная, созданная с помощью команды addRadialGradient (), обычно сохраняется в переменной, где она может использоваться для последующих запросов fillStyle ().