Создание градиента

Последнее обновление: 06.11.2023

Элемент Canvas позволяет использовать градиент в качестве фона. Для этого применяется объект CanvasGradient, который можно создать либо с помощью метода createLinearGradient() (линейный градиент), либо с помощью метода createRadialGradient() (радиальный градиент).

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

Линейный градиент создается помощью метода createLinearGradient(x0, y0, x1, y1), где x0 и y0 - это начальные координаты градиента относительно верхнего левого угла canvas, а x1 и y1 - координаты конечной точки градиента. Например:

const gradient = context.createLinearGradient(50, 30, 150, 150);

Также для создания градиента необходимо задать опорчные точки, которые определяют цвет. Для этого у объекта CanvasGradient применяется метод addColorStop(offset, color), где offset - это смещение точки градиента, а color - ее цвет. Например:

gradient.addColorStop(0, "blue");

Смещение представляет значение в диапазоне от 0 до 1. Смещение 0 представляет начало градиента, а 1 - его конец. Цвет задается либо в виде строки, либо в виде шестнадцатеричного значения, либо в виде значения rgb/rgba.

Применим градиент:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const gradient = context.createLinearGradient(50, 30, 150, 150);
gradient.addColorStop(0, "blue");       // от синего цвета
gradient.addColorStop(1, "white");      // к белому цвету
context.fillStyle = gradient;           // в качестве цвета заполнения устанавливаем градиент
context.fillRect(50, 30, 150, 150);
context.strokeRect(50, 30, 150, 150);
</script>
</body>
</html>

Здесь для создания градиента добавлены две опорные точки - для синего и белого цвета. В итоге мы получим переход от синего цвета в белый:

Линейный градиент на canvas в JavaScript

Стоит отметить, что опорных точек для создания градиента может быть несколько

gradient.addColorStop(0, "blue");       // от белого цвета
gradient.addColorStop(0.5, "green");    // к зеленому цвету
gradient.addColorStop(1, "white");      // к синему цвету

В примере выше мы получаем диагональный линейный градиент. Управляя координатами, мы можем получить горизонтальный или вертикальный градиент.

Совпадение x-координат начальной и конечной точек создает вертикальный градиент:

const gradient = context.createLinearGradient(50, 30, 50, 150);
Горизонтальный линейный градиент на canvas в JavaScript

А совпадение y-координат начальной и конечной точек создает горизонтальный градиент:

const gradient = context.createLinearGradient(50, 30, 150, 30);
Вертикальный линейный градиент на canvas в JavaScript

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

Радиальный градиент создается с помощью метода createRadialGradient(x0, y0, r0, x1, y1, r1), который принимает следующие параметры:

  • x0 и y0: координаты центра первой окружности

  • r0: радиус первой окружности

  • x1 и y1: координаты центра второй окружности

  • r1: радиус второй окружности

Например:

const gradient = context.createRadialGradient(120,100,100,120,100,30);

И также для радиального градиента нам надо задать опорные цветовые точки с помощью метода addColorStop()

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const gradient = context.createRadialGradient(120,100,100,120,100,30);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(50, 30, 150, 150);
context.strokeRect(50, 30, 150, 150);
Радиальный градиент на canvas в JavaScript

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм