HTML and CSS Reference
In-Depth Information
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, 200, 200);
}
Figure 2-31. A complex radial gradient
As with the linear gradients, we can also apply the radial gradients to complex shapes.
Example 2-23
takes an arc example from earlier in this chapter, but applies a radial
gradient to create
Figure 2-32
.
Example 2-23. A radial gradient applied to a circle
function drawScreen() {
var gr = context.createRadialGradient(50,50,25,100,100,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.arc(100, 100, 100, (Math.PI/180)*0, (Math.PI/180)*360, false);
context.fill();
}
Example 2-23
takes the radial gradient from
Example 2-22
and applies it to a circle
shape rather than a rectangle shape. This removes the red square from the background
of the shape.
We can also apply our radial gradient to the stroke of our arc rather than the fill, as
shown in
Example 2-24
and
Figure 2-33
.
