HTML and CSS Reference
In-Depth Information
FiGure 28-6
working with circles
Because there is a
fillRect()
function for drawing rectangles, it's natural to think there would
be a
fillCircle()
function for circles — but that would be too easy. Seriously, the JavaScript API
includes a function that provides much more flexibility in rendering curved lines:
arc()
.
The
arc()
function requires the following arguments:
➤
A center point (designated by an x and y pair of coordinates)
➤
A radius
➤
The starting and ending angle, in radians
➤
A Boolean direction flag where
true
means counter-clockwise and
false
means clockwise
Unless you're fresh from a geometry class, you probably don't recall how radians are calculated.
Not to worry, JavaScript includes a Math library that can handle the heavy lifting for you. Because
drawing a circle with a series of arcs is a continuous path, methods for starting and stopping the
path are necessary. The
beginPath()
and
closePath()
functions fulfill this need. Once the path is
closed, the
stroke()
and
fill()
functions draw the circle on the page. Here's the code for drawing
a circle that is centered in a canvas 300 pixels square, with a radius of 100 pixels:
<script type=”text/javascript”>
function doCanvas() {
var my_canvas = document.getElementById(“myCanvas”);
var myCanvas_context = my_canvas.getContext(“2d”);
myCanvas_context.strokeStyle = “#000000”;
myCanvas_context.fillStyle = “#FFFF00”;
