CanvasRenderingContext2D.createLinearGradient()

CanvasRenderingContext2D.createLinearGradient() - створює лінійний градієнт вздовж лінії.

Синтаксис:

gradient = ctx.createLinearGradient( x0, y0, x1, y1 );

Параметри:

gradient - зміна яка отримує об'єкт CanvasGradient.

ctx - об'єкт CanvasRenderingContext2D.

x0 - осі х координати початкової точки.

y0 - осі Y координати початкової точки.

x1 - осі X координати кінцевої точки.

y1 - осв Y координати кінцевої точки.

Опис:

createLinearGradient() метод об'єкту CanvasRenderingContext2D який створює лінійний градієнт вздовж лінії. Повертає об'єкт CanvasGradient.

Приклад:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, '#3d3d3f');
gradient.addColorStop(1, 'white');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, canvas.width, canvas.height);

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var gradient = ctx.createLinearGradient(0,0,0,canvas.width);
gradient.addColorStop("0", 'yellow');
gradient.addColorStop("1", 'red');
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, canvas.width, canvas.height);