HTML and CSS Reference
In-Depth Information
Radial Gradients and Text
A radial gradient is created much like a linear gradient, except that it represents a cone—not
a line. The cone is created by defining the center points and the radii of two different circles
when calling the
createRadialGradient()
function of the Canvas context:
var
gradient
=
context
.
createRadialGradient
(
[
x0
]
,
[
y0
]
,
[
radius0
]
,
[
x1
]
,
[
y1
]
,
[
radius1
]
);
Let's say you want to create a radial gradient based on a cone. It starts with a circle that has
its center point at 100,100 and a radius of 20, and it ends at a circle with its center point at
200,100 and a radius of 5. The code would look like this:
var
var
var
gradient
=
context
.
createRadialGradient
(
100
,
100
,
20
,
200
,
100
,
5
);
Adding color stops to a radial gradient works the same as with a linear gradient, except the
color moves along the cone instead of the line:
gradient
.
addColorStop
(
0
,
"#000000"
);
gradient
.
addColorStop
(.
5
,
"#FF0000"
);
