HTML and CSS Reference
Figure 13-13: The fi nal drawing of the briefcase.
Making curves, even with drawing tools, is trickier than drawing straight lines. To understand
how to make curves, I'll start this section with a discussion of arcs and the canvas DOM
methods for creating them. We'll look at some of the geometry, but not a lot. (You do need a
little understanding of geometry, but don't worry — it's basic.)
h e i rst thing that you need to understand is the dif erence between degrees and radians.
Most people know that a circle has 360 degrees. On a compass rose, 360 or 0 degrees (12
o'clock) is due north. As you move clockwise to 90 degrees (3 o'clock), the compass points
east; at 180 degrees (6 o'clock), south; and at 270 degrees (9 o'clock), west.
However, you have to use radians instead of degrees, so all degrees must be converted to
radians. Use the following formula:
Radians = (PI ÷ 180)
So, let's say that you want to know the radians for due west (9 o'clock), 270 degrees:
Radians = (3.14159265 ÷ 180) = 0.01745329251994
Radians = 0.01745329251994
Radians = 4.71238898
A simple way to do the same thing is to just multiply degrees by 0.01745329251994 or in
radians = (Math.PI/180)* degrees;