Градиенты на Canvas в HTML5

Градиент Canvas HTML5 может использоваться в качестве цветового режима наполнения или контура формы, а не простого цвета. Градиент - это цветовой режим, переходящий от одного цвета к другому. Градиенты имеют два типа: Linear (линейный) и Radial (радиальный)

Градиент Canvas HTML5 может использоваться в качестве цветового режима наполнения или контура формы, а не простого цвета. Градиент - это цветовой режим, переходящий от одного цвета к другому. Вот несколько примеров для пояснения:

Есть два типа градиентов:

1. Linear (линейный)

2. Radial (радиальный)

Линейный градиент изменяет цвет с помощью горизонтального, вертикального или диагонального линейного рисунка.
Радиальный градиент изменяет цвет с помощью кругового рисунка, от внутреннего к внешнему.
Два типа градиентов описаны в этой статье.

Линейный градиент

Как уже упоминалось, линейный градиент изменяет цвет с помощью линейного рисунка. Линейный градиент создается с помощью функции контекста 2D createLinearGradient(). Вот пример:

var canvas = document.getElementById("ex1");
var　context = canvas.getContext("2d");
　　　　
var x1 =        0;
var y1 =        0;
var x2 = 100;
var y2 =        0;
var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

Функция createLinearGradient() использует 4 параметра: x1, y1, x2, y2. Эти 4 параметра определяют направление и продолжительность градиентного рисунка. Градиент распространяется от первого точки x1, y1 до второго точки x2, y2.
Создание горизонтального градиента через изменение параметров x (для x1 и x2), как показано ниже:

　　　　var x1 =        0;
　　　　var y1 =        0;        var x2 = 100;
　　　　var y2 =        0;
　　　　var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

Создание вертикального градиента через изменение параметров y (для y1 и y2), как показано ниже:

　　　　var x1 =        0;        var y1 =        0;
　　　　var x2 =        0;        var y2 = 100;
　　　　var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

Создание диагонального градиента через одновременное изменение параметров x и y осей. Вот пример:

　　　　var x1 =        0;
　　　　var y1 =        0;
　　　　var x2 = 100;
　　　　var y2 = 100;
　　　　var linearGradient1 = context.createLinearGradient(x1, y1, x2, y2);

Цветовые остановки

В этом примере цвета градиента не показаны. Чтобы установить цвета градиента, можно использовать функцию addColorStop() на градиентном объекте. Вот пример:

var linearGradient1 = context.createLinearGradient(0, 0, 100, 0);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(1, 'rgb(    0, 0, 0)');

Функция addColorStop() имеет два параметра. Первый параметр - число между 0 и 1. Это число указывает на расстояние, на котором будет размещена эта метка в градиентной области. Второй параметр - сам цвет. Обратите внимание, как в этом примере используется цветовая схема rbg(red, green, blue), где каждый из значений красного, зеленого и синего может быть числом от 0 до 255 (представленным в одном байте).
В этом примере добавлены две метки. Первая - красный, установленный с начала градиента (первый параметр равен 0). Второй цвет - черный, установленный в конце градиентной области (первый параметр равен 1).
Вы можете добавить более двух цветовых меток к градиенту. Вот пример с тремя метками:

var linearGradient1 = context.createLinearGradient(0, 0, 100, 0);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');

Этот пример добавляет синий цвет в центре градиента. Градиент будет переходить от красного к синему, а затем к черному.

Использование градиента в качестве заливки или обводки стиля

Вы можете использовать градиент в качестве заливки или стиля пера. Достаточно установить атрибут fillStyle или strokeStyle 2D контекста на указание градиентного объекта. Вот пример:

var linearGradient1 = context.createLinearGradient(0, 0, 100, 0);
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = linearGradient1;
context.strokeStyle = linearGradient1;

Теперь вы можете использовать градиент для заполнения или обводки цвета при рисовании. Это пример рисования двух прямоугольников - один заполнен, а другой обведен (обведен):

<canvas id="ex2" width="500" height="125" style="border: 1px solid #cccccc;">
　　　　HTML5 Canvas не поддерживается
</canvas>
<script>
var canvas = document.getElementById("ex2");
var　context = canvas.getContext("2d");
var linearGradient1 = context.createLinearGradient(0, 0, 100, 0); // horizontal gradient
linearGradient1.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient1.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient1.addColorStop(1, 'rgb(0, 0, 0)');
context.fillStyle = linearGradient1;
context.fillRect(10, 10, 100, 100);
var linearGradient2 = context.createLinearGradient(125, 0, 225, 0); // horizontal gradient
linearGradient2.addColorStop(0, 'rgb(255, 0, 0)');
linearGradient2.addColorStop(0.5, 'rgb(0, 0, 255)');
linearGradient2.addColorStop(1, 'rgb(0, 0, 0)');
context.strokeStyle = linearGradient2;
context.strokeRect(125,　10,　100,　100);
</script>

Это результат рисования на канвасе:

Область градиентной градиентной линии

Важно понять степень градиента. Если градиент extends от x = 10 до x = 110, то только объекты с x от 10 до 110 будут нарисованы с градиентным цветом. Объекты, нарисованные вне этой области, все еще будут受到影响 от градиента, но будут нарисованы с первым или последним цветом градиента.
Например, предположим, что градиент extends от x = 150 до x = 350. Градиент будет переходить от синего к зеленому. Все объекты, нарисованные с x меньше 150, будут нарисованы синим цветом. Все объекты, нарисованные с x больше 350, будут нарисованы зеленым цветом. Только объекты с x между 150 и 350 будут иметь градиентный цвет.
Это пример кода, который использует вышеуказанный градиент для рисования 5 прямоугольников, чтобы объяснить это

<canvas id="ex3" width="500" height="250" style="border:　1px　solid　#cccccc;">
　　　　HTML5 Canvas не поддерживается
</canvas>
<script>
var　canvas = document.getElementById("ex3");
var　context = canvas.getContext("2d");
var　linearGradient1 = context.createLinearGradient(150,　0,　350,0);
linearGradient1.addColorStop(0,　'rgb(0,　　　0,　255)');
linearGradient1.addColorStop(1,　'rgb(0,　255,　0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,130,　100);
context.fillRect(150,10,　200,　100);
context.fillRect(360,10,　130,　100);
context.fillRect(100,120,　150,　100);
context.fillRect(280,120,　150,　100);
</script>

Это результат рисования на холсте. Обратите внимание, что только графические объекты с координатами x от 150 до 350 имеют градиентные цвета, а остальные графические объекты полностью синие (первый цветовой метка) или полностью зеленые (последняя цветовая метка).

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

Радиальный градиент

Тип радиального градиента - это圆形图案, который распространяется от внутреннего цвета к одному или нескольким другим цветам. Вот несколько примеров графиков:

Радиальный градиент определяется двумя кругами. У каждого круга есть центр и радиус. Это пример кода:

var x1 = 100; // X координата центра 1-го круга
var y1 = 100; // Y координата центра 1-го круга
var r1 = 30; // Радиус 1-го круга
var x2 = 100; // X координата центра 2-го круга
var y2 = 100; // Y координата центра 2-го круга
var r2 = 100; // Радиус 2-го круга
var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0, 0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);

Как вы видите, определены два центра (x1, y1 и x2, y2) и два радиуса (r1 и r2). Эти значения передаются в функцию createRadialGradient() 2D контекста в качестве параметров.
Должны быть определены два круга с различными радиусами, чтобы они дали внутренний и внешний круги (по крайней мере по размеру). Затем, цвета в градиенте будут распространяться от одного круга к другому.
Работа цветовых меток аналогична линейному градиенту. Они определяют, какие цвета используются в градиенте, и где в диапазоне градиента должны быть放置ены эти цвета.
Добавленные цветовые метки будут соответствовать некоторому положению между двумя окружностями. Например, первый параметр 0 в цветовых остановах означает, что цвет начнется с места первого круга. Первый параметр 1 в цветовых остановах означает, что цвет начнется с места второго круга.
Это результат кода,绘制的HTML5画布上的结果:

Если два круга имеют одинаковый центр, то градиент будет полностью круглым, и цвет будет плавно переходить от внутреннего круга к внешнему. Если центры двух кругов различаются, то градиент будет больше походить на конус, как свет от лампы,投射аемый (неorthogonalно) на поверхность. Это пример кода,类似锥形:

var x1 = 100;
var y1 = 100;
var r1 = 30;
var x2 = 150;
var y2 = 125;
var r2 = 100;
var radialGradient1 = context.createRadialGradient(x1, y1, r1, x2, y2, r2);
radialGradient1.addColorStop(0, 'rgb(0, 0, 255)');
radialGradient1.addColorStop(1, 'rgb(0, 255, 0)');
context.fillStyle = radialGradient1;
context.fillRect(10,10, 200, 200);

Вот как это выглядит при рисовании градиента на канвасе: