HTML and CSS Reference

In-Depth Information

Figure 13-13: The fi nal drawing of the briefcase.

CURVES

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.)

275

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)

×

degrees

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

×

270

Radians = 4.71238898

A simple way to do the same thing is to just multiply degrees by 0.01745329251994 or in

JavaScript write:

radians = (Math.PI/180)* degrees;