HTML canvas createRadialGradient()Метод
Объект CanvasПример
Нарисуйте прямоугольник и залейте его радиальным/круговым градиентом:
JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Заливка градиентом
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Заливка градиентом
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Попробуйте сами »
Поддержка браузеров
Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают метод createRadialGradient().
Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
Определение и использование
Метод createRadialGradient() создает объект радиального/кругового градиента.
Градиент можно использовать для заливки прямоугольников, кругов, линий, текста и т. д.
Совет:Используйте этот объект какstrokeStyleилиfillStyleзначение свойства.
Совет:Пожалуйста, используйтеaddColorStop()метод, чтобы указать различные цвета и их положение в объекте градиента.
| Синтаксис JavaScript: | context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
Значения параметров
| Параметр | Описание |
|---|---|
| x0 | Координата x начального круга градиента |
| y0 | Координата y начального круга градиента |
| r0 | Радиус начального круга |
| x1 | Координата x конечного круга градиента |
| y1 | Координата y конечного круга градиента |
| r1 | Радиус конечного круга |
Другие расширения