Руководство по использованию градиентов в HTML Canvas: методы и приемы

“Градиенты HTML Canvas” действительно на английском языке. Вот несколько методов работы с градиентами на холсте HTML:

  1. createLinearGradient(x0, y0, x1, y1): этот метод создает объект линейного градиента, который представляет градиент между двумя указанными точками (x0, y0) и (x1, y1) на холсте.

  2. createRadialGradient(x0, y0, r0, x1, y1, r1): этот метод создает объект радиального градиента, который представляет градиент между двумя указанными кругами. Градиент начинается в центре первого круга (x0, y0) с радиусом r0 и заканчивается в центре второго круга (x1, y1) с радиусом r1.

  3. addColorStop(offset, color): этот метод используется для определения остановок цвета внутри объекта градиента. Параметр offset указывает, где размещается точка цвета вдоль градиента, в диапазоне от 0 до 1. Параметр цвета определяет цвет остановки.

  4. fillStyle: свойство fillStyle устанавливает или возвращает цвет, градиент или узор, используемые для заливки фигур на холсте. Его можно установить для объекта градиента, созданного с помощью createLinearGradient или createRadialGradient.

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

  6. Рисование с помощью градиентов. Создав объект градиента, вы можете использовать его для заливки или обводки фигур на холсте, используя такие методы, как fillRect, fillText,strokeRect и т. д.