JavaScript provides a method for drawing circular areas and we'll get
to that in a moment, but first a little plug for SVG (Scalable Vector
Graphics). Inspect the code which produces the following ellipse:
By no means is JavaScript the only horse in town, but it is one of the best
horses you can ride when it comes to creating interactive graphics. However,
there are other methods which can be used to create graphics which are
sometimes quite useful. SVG is a good example of this.
Now, getting back to JavaScript, let's take a look at how to render an
ellipse on a web page within canvas.
Once you have inspected the code for this little applet, it will be apparent
that the arc method is responsible for the position and size of the circles.
ctx.arc(cx,cy,r,start,rotation);
The arc method takes the following parameters:
cx - x-coordinate for the center of the arc
yc - y-coordinate for the center of the arc
r - radius of the arc
start - start angle in radians
end - end angle (2*Math.PI = 360 degrees)
There is also another optional parameter which specifies if
the arc will be draw in a clockwise or counter-clockwise direction.
So, the logical thing to do now is to look at several examples of what we
can do with the arc method:
ASSIGNMENT:
Recreate the image shown to the right in a JavaScript applet utilizing the
methods presented in this lesson. In particular, you will need to use the
arc and scale methods. You will need to do a bit of
adjusting with the ellipses. You may change the color if you desire. Set the
strokeWidth to three.
