CanvasGradient

CanvasGradient - об'єкт градієнт.

Синтаксис:

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

Параметри:

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

ctx - об'єкт CanvasRenderingContext2D.

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

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

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

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

Опис:

CanvasGradient об'єкт який описує градієнт.

Отримується об'єкт CanvasGradient за допомогою методів createLinearGradient або createRadialGradient.

CanvasGradient

addColorStop() - додає вказаний колір і положення в об'єкт CanvasGradient.

Приклад:

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

var gradient = canvas.createLinearGradient(0, 0, 0, 100);
alert(gradient);

var el =document.getElementById("canvas");
var canvas = el.getContext("2d");

var gradient = canvas.createLinearGradient(0, 0, el.width, 0);
gradient.addColorStop("0", "#ff00ee");
gradient.addColorStop(".20", "#fe00aa");
gradient.addColorStop(".40", "#ee0088");
gradient.addColorStop(".60", "#de0000");
canvas.fillStyle = gradient;
canvas.fillRect(0, 0, el.width, el.height);

var el =document.getElementById("canvas");
var canvas = el.getContext("2d");

var gradient = canvas.createLinearGradient(0, 0, el.width, 0);
gradient.addColorStop("0", "rgba(100,150,185,0.1)");
gradient.addColorStop("1", "#de0000");
canvas.fillStyle = gradient;
canvas.fillRect(0, 0, el.width, el.height);