HTML and CSS Reference
In-Depth Information
context . lineTo ( 50 , 100 );
context . lineTo ( 0 , 100 );
context . lineTo ( 0 , 0 );
context . stroke ();
context . fill ();
context . closePath ();
}
In this example, we use the context.fill() command to fill in our shape with the current
fillStyle , creating the output shown in Figure 2-26 .
Figure 2-26. A horizontal gradient on a complex shape
Figure 2-26 shows the new shape we have created with points. As long as the points are
closed, the fill will work as we expect.
Vertical gradients
Verticalgradientsarecreatedinaverysimilarmannerasthehorizontalvariety.Thedifference
is that we must specify a y value that is not 0 , and the x values must both be 0 . Example 2-18
shows the shape from Example 2-17 created with a vertical rather than a horizontal gradient
to produce the output in Figure 2-27 .
Example 2-18. Vertical gradients
function
function drawScreen () {
var
var gr = context . createLinearGradient ( 0 , 0 , 0 , 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 . fillStyle = gr ;
context . beginPath ();
Search WWH ::




Custom Search