Элемент 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>
Здесь для создания градиента добавлены две опорные точки - для синего и белого цвета. В итоге мы получим переход от синего цвета в белый:
Стоит отметить, что опорных точек для создания градиента может быть несколько
gradient.addColorStop(0, "blue"); // от белого цвета gradient.addColorStop(0.5, "green"); // к зеленому цвету gradient.addColorStop(1, "white"); // к синему цвету
В примере выше мы получаем диагональный линейный градиент. Управляя координатами, мы можем получить горизонтальный или вертикальный градиент.
Совпадение x-координат начальной и конечной точек создает вертикальный градиент:
const gradient = context.createLinearGradient(50, 30, 50, 150);
А совпадение y-координат начальной и конечной точек создает горизонтальный градиент:
const gradient = context.createLinearGradient(50, 30, 150, 30);
Радиальный градиент создается с помощью метода 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);