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.
Search WWH ::




Custom Search