HTML and CSS Reference
In-Depth Information
Figure 2-24. Linear horizontal gradient on multiple objects
Example 2-15. Multiple gradient-filled objects
function drawScreen() {
var gr = context.createLinearGradient(0, 0, 100, 0);
// 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.fillRect(0, 0, 100, 100);
context.fillRect(0, 100, 50, 100);
context.fillRect(0, 200, 200, 100);
}
Gradients can be applied to any shape—even the
stroke around a shape.
Example 2-16
takes the filled rectangles from
Example 2-15
and
creates a
strokeRect
shape instead of a filled rectangle.
Figure 2-25
shows the very
different result.
Applying a horizontal gradient to a stroke.
Example 2-16. A horizontal stroke gradient
function drawScreen() {
var gr = context.createLinearGradient(0, 0, 100, 0);
// 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)');