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

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

от vladimir , в категории: Другие , 8 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от keyon.brown , 8 месяцев назад

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