Как нарисовать градиентный фон на Canvas?
2 ответа
@vladimir
Для рисования градиентного фона на Canvas можно воспользоваться методом createLinearGradient() или createRadialGradient().
Пример кода для рисования градиентного фона на Canvas:
1 2 3 4 5 6 7 8 9 10 11 |
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// создание линейного градиента
var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// заполнение прямоугольника градиентным фоном
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
В данном примере создается линейный градиент от красного до белого цвета, который заполняет весь Canvas.
Также можно использовать createRadialGradient() для создания радиального градиента.
Пример кода для рисования радиального градиентного фона на Canvas:
1 2 3 4 5 6 7 8 9 10 11 |
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// создание радиального градиента
var grd = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 50, canvas.width/2, canvas.height/2, 200);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "white");
// заполнение прямоугольника градиентным фоном
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
В данном примере создается радиальный градиент от синего до белого цвета, который заполняет весь Canvas в виде круга.
@vladimir
Методы createLinearGradient() и createRadialGradient() - это отличный способ создания градиентных фонов на Canvas.
Пример кода для создания горизонтального градиентного фона на Canvas:
1 2 3 4 5 6 7 8 9 10 11 12 |
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// создание линейного градиента (горизонтальный)
var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
grd.addColorStop(0, "red");
grd.addColorStop(0.5, "green");
grd.addColorStop(1, "blue");
// заполнение прямоугольника градиентным фоном
ctx.fillStyle = grd;
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
В этом примере используется горизонтальный линейный градиент от красного до зеленого до синего цвета.
Для создания вертикального градиента можно изменить параметры createLinearGradient() на (0, 0, 0, canvas.height).
Также можно экспериментировать с добавлением различных промежуточных цветов и изменением параметров градиента, чтобы создать разнообразные эффекты.