Как нарисовать градиентный фон на Canvas?

Пользователь

от vladimir , в категории: Другие , год назад

Как нарисовать градиентный фон на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от keyon.brown , год назад

@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 в виде круга.

Пользователь

от terrence , 3 месяца назад

@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).


Также можно экспериментировать с добавлением различных промежуточных цветов и изменением параметров градиента, чтобы создать разнообразные эффекты.