HTML and CSS Reference

In-Depth Information

You can i nd plenty of calculators online to do the conversion for you.

Arcs

h e canvas DOM method for drawing arcs is
context.arc()
. h e method has several

parameters that need to be understood in concert and individually:

x,y
: Circle's center

radius
: Radius of circle

startAngle
: Start point of arc expressed in radians

endAngle
: End point of arc expressed in radians

anticlockwise
: Boolean (
true
is counterclockwise and
false
is clockwise)

I i nd it helpful to envision either a compass rose or a clock with the four cardinal directions

and time/degrees — north (12 o'clock or 0 degrees), east (3 o'clock or 90 degrees), south (6

o'clock or 180 degrees), and west (9 o'clock or 270 degrees). A full arc statement looks like the

following:

contextNow.arc(150,100,50,six,0,true);

h is arc has its center at x = 150 and y = 100, and it has a radius of 50. h e start angle is set to

6, which is a variable that we've created to represent the 6 o'clock position of 180 degrees. h e

variable's value has been converted to radians. Both degrees and radians have the same value

at the 12 o'clock position (0), and it is used as the ending angle. Finally, the arc is set to true —

anticlockwise.

276

h is next program is one used to experiment with dif erent arcs. Four variables — 12, 3, 6,

and 9 — are set in radians corresponding to the positions on a clock. Certain statements are

commented out but will be used later.

<!
DOCTYPE HTML
>

<
html
>

<
head
>

<
script
type
=
”text/javascript”
>

CanvasMaster=new Object();

CanvasMaster.showCanvas=function()

{

canvasNow = document.getElementById(“beHappy”);

contextNow = canvasNow.getContext('2d');

contextNow.beginPath();

contextNow.moveTo(0,0);

contextNow.lineTo(300,0);

contextNow.lineTo(300,200);

contextNow.lineTo(0,200);

contextNow.closePath();

contextNow.stroke();