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)');
 
Search WWH ::




Custom Search