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
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
();