пример
Нарисуйте прямоугольник и залейте радиальным градиентом / круговой:
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");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100); Попробуй сам " Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| createRadialGradient() | 4,0 | 9,0 | 3,6 | 4,0 | 10,1 |
Определение и использование
createRadialGradient() метод создает радиальный / круговой градиент объект.
Градиент может быть использован для заполнения прямоугольники, круги, линии, текст и т.д.
Tip: Используйте этот объект в качестве значения к StrokeStyle или FillStyle свойствам.
Tip: Используйте addColorStop() метод , чтобы определить различные цвета, и где расположить цвета в объекте градиента.
| Синтаксис JavaScript: | context . createRadialGradient( x0,y0,r0,x1,y1,r1 ) ; |
|---|
Значения параметров
| параметр | Описание |
|---|---|
| x0 | Х-координата начальной окружности градиента |
| y0 | Y-координата начальной окружности градиента |
| r0 | Радиус исходного круга |
| x1 | Х-координата конечной окружности градиента |
| y1 | У-координата конечной окружности градиента |
| r1 | Радиус окружности, заканчивающейся |
<Холст объекта