CanvasRenderingContext2D.createRadialGradient()

CanvasRenderingContext2D.createRadialGradient() - створює радіальний градієн.

Синтаксис:

ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

x0 - коорлинати осі Х початкової окружності.

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

r0 - радіус початкової окружності.

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

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

r1 - радіус кінцевої окружності.

Опис:

createRadialGradient() метод об'єкту CanvasRenderingContext2D який створює радіальний градієнт який визначається координатами двох кіл вказаними в параметрах. Повертає об'єкт CanvasGradient.

Приклад:

var canvas = document.getElementById("canvas").getContext("2d");
var gradient = canvas.createRadialGradient(50, 50, 50, 50, 50, 0);
gradient.addColorStop(0, "white");
gradient.addColorStop(0.9, "blue");
canvas.fillStyle = gradient;
canvas.fillRect(0,0,100,100);

 var canvas = document.getElementById("canvas").getContext("2d");
var gradient = canvas.createRadialGradient(65, 40, 55, 58, 62, 5);
gradient.addColorStop(0, "white");
gradient.addColorStop(0.5, "green");
gradient.addColorStop(0.9, "blue");
canvas.fillStyle = gradient;
canvas.fillRect(0,0,120,120);