Как нарисовать градиентный фон на Canvas?
1 ответ
от
keyon.brown ,
10 месяцев назад
@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 в виде круга.
15