HTML and CSS Reference
In-Depth Information
context . beginPath ();
context . moveTo ( 0 , 0 );
context . fillRect ( 0 , 0 , 100 , 100 )
context . closePath ();
}
Figure 2-29. A diagonal gradient example
Radial gradients
Thedefinitionprocessforradialandlineargradientsisverysimilar.Althougharadialgradient
takes six parameters to initialize rather than the four needed for a linear gradient, it uses the
same color stop idea to create the color changes.
The six parameters are used to define the center point and the radii of two circles. The first
circle is the “start” circle, and the second circle is the “end” circle. Let's look at an example:
var
var gr = context . createRadialGradient ( 50 , 50 , 25 , 50 , 50 , 100 );
The first circle has a center point of 50,50 and a radius of 25 ; the second has a center point of
50,50 and a radius of 100 . This will effectively create two concentric circles.
We set color stops the same way we did with the linear gradients:
gr . addColorStop ( 0 , 'rgb(255,0,0)' );
gr . addColorStop (. 5 , 'rgb(0,255,0)' );
gr . addColorStop ( 1 , 'rgb(255,0,0)' );
Example 2-21 puts this together to create the result shown in Figure 2-30 .
Example 2-21. A simple radial gradient
function
function drawScreen () {
var
var gr = context . createRadialGradient ( 50 , 50 , 25 , 50 , 50 , 100 );
// Add the color stops.
gr . addColorStop ( 0 , 'rgb(255,0,0)' );
gr . addColorStop (. 5 , 'rgb(0,255,0)' );
Search WWH ::




Custom Search