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.

Приклад:

Ваш браузер не підтримує canvas.
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);