HTML and CSS Reference
In-Depth Information
that symbol,
π
? That is equal to about 3.1416, meaning that a circle (6.2832 radians) measures exactly 2
pi. It still might not seem too logical now, but work with it enough, and you'll get used to thinking of 360
degrees as 2 pi, 180 degrees as pi, 90 degrees as pi/2, and so on. Figure 3-2 illustrates some common
radian measurements.
270 degrees
3 pi/2 radians
180 degrees
pi radians
0 or 360 degrees
0 or 2 pi radians
57.2958 degrees
1 radian
90 degrees
pi/2 radians
Figure 3-2.
Radians and degrees
Now, we can leave the discussion there and just tell you that you can use radians from here on out. You
might sigh a bit, and then get used to it and be fine with using radians exclusively. But you're going to
encounter many situations where you need to use degrees
with
radians. For example, when rotating an
image on the canvas element, we use the
context.rotate(angle)
method, using radians for the angle.
However, in many examples we set up the objects in our scene using the more human-friendly degrees,
so we need a way to easily convert the values.
So why use two completely different systems? Well, you don't have to. You can keep everything as
radians since that is what the canvas expects. However, it's often convenient to think of angles in terms of
degrees, for ourselves and others, simply because it's how most people think of angles. I'm sure most
designers would look at you cross-eyed if you told them to enter a radian value to rotate the text for the
logo they are creating. When working with HTML, programmers must straddle the line between design and
development, and JavaScript, like most programming languages, uses radians. Because you'll likely be
working with both, you need to know how to convert degrees to radians and back again. Here are the
formulas:
radians = degrees * Math.PI / 180
degrees = radians * 180 / Math.PI
As you go through this topic, you run into a lot of formulas. Here and there, I'll point out a formula as one
that you should memorize—burn these into the backs of your eyelids. These conversion formulas are the
