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”;
Search WWH ::

Custom Search