THUNDERING YOUR SITE WITH CANVAS - HTML5 - page 275

Figure 13-15: An arc with a closed path and fi ll.

h e only way to really learn to work with arcs is to practice with them. Use the script in this
section to try dif erent things.

279

Circles and gradients
h us far, only a single type of i ll has been used — a solid one. In this section, you'll see how
to make a circle using an arc and i ll it with a gradient.

First, making circles is easy using the context.arc() method. h e radian parameters are 0
and Math.PI*2 . And the anticlockwise parameter is false . (h at's the trick.) For instance,
this next example uses the following line to create a big circle that will be i lled with a gradi-
ent, to make it look like a sunset:

contextNow.arc(200,200,150,0,Math.PI*2,false);

To create a gradient i ll, both linear and radial, is fairly straightforward. h e i rst step is using
the canvas DOM context.createLinearGradient() method. h e method expects four
parameters: x0 , y0 , x1 , y1 . h e gradient i ll moves from x0 to x1 and from y0 to y1 . A
straight linear gradient from let to right would have a single value in x1 , and the rest would be
0. A gradient from top to bottom would have value in either y0 or y1 , with the rest set to 0.

To set the gradient colors, use the gradient.addColorStop() method. It expects two
parameters. h e i rst is a zero-based number from 0 to 1 and the second is the color. Once
that's completed, assign the context.fillStyle the gradient. h e following snippet
shows the steps in adding a gradient i ll:

sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);