HTML and CSS Reference
In-Depth Information
var
var
gr
=
context
.
createRadialGradient
(
50
,
50
,
25
,
100
,
100
,
100
);
// Add the color stops.
gr
.
addColorStop
(
0
,
'rgb(255,0,0)'
);
gr
.
addColorStop
(.
5
,
'rgb(0,255,0)'
);
gr
.
addColorStop
(
1
,
'rgb(255,0,0)'
);
// Use the gradient for the fillStyle.
context
.
strokeStyle
=
gr
;
context
.
arc
(
100
,
100
,
50
, (
Math
.
PI
/
180
)
*
0
, (
Math
.
PI
/
180
)
*
360
,
false
false
)
context
.
stroke
();
}
Figure 2-33. An arc stroke gradient
Example 2-24
created a circle that is smaller than the version in
Example 2-23
,
so the radial
gradient would show up on the stroke of the arc. If we left it the same size as
Example 2-23
,
we would have a solid red fill because the radial gradient is solid red at the diameter edge of
the circle.