HTML and CSS Reference
In-Depth Information
The first circle has a center point of
50,50
and a radius of
25
; the second has a center
point of
50,50
and a radius of
100
. This will effectively create two concentric circles.
We set color stops the same way we did with the linear gradients:
gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(255,0,0)');
Example 2-21
puts this together to create the result shown in
Figure 2-30
.
Example 2-21. A simple radial gradient
function drawScreen() {
var gr = context.createRadialGradient(50,50,25,50,50,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.fillRect(0, 0, 200, 200);
}
Figure 2-30. A simple radial gradient
Example 2-22
offsets the second circle from the first to create the effects shown in
Figure 2-31
.
Example 2-22. A complex radial gradient
function drawScreen() {
var gr = context.createRadialGradient(50,50,25,100,100,100);
// Add the color stops.
gr.addColorStop(0,'rgb(255,0,0)');
