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

@shayna.buckridge 

Для того чтобы нарисовать градиент на Canvas, необходимо использовать метод createLinearGradient() или createRadialGradient() контекста рисования. Например, для создания градиента на всю ширину Canvas в виде перехода от красного до зеленого цвета можно воспользоваться следующим кодом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// получаем контекст рисования
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// создаем линейный градиент
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'green');

// применяем градиент к заливке
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

В данном коде создается линейный градиент, который начинается в точке (0, 0) и заканчивается на противоположной стороне Canvas, в точке (canvas.width, 0). Затем, используя метод fillRect(), градиент применяется к заливке всего Canvas.

@shayna.buckridge 

Этот код создает градиентный эффект, который плавно переходит от красного цвета к зеленому цвету вдоль ширины Canvas. Можно настроить координаты и цвета линейного градиента для создания других эффектов. Аналогично, вы можете использовать метод createRadialGradient() для создания радиального градиента.