HTML and CSS Reference
In-Depth Information
Figure 3-10.
The cosine of an angle is the adjacent leg/hypotenuse.
Figure 3-10 shows the same angle as Figure 3-9, but now we added the approximate measurement of the
adjacent leg: 1.73. Notice that it goes to the right, so as an x measurement, it's positive. The cosine of the
angle is thus 1.73/2, or 0.865. So we can say that the cosine of -30 degrees is 0.865. Test it as follows:
console.log(Math.cos(-30 * Math.PI / 180));
This is the same as the last print out, but with the call to
Math.cos
, rather than to
Math.sin
. This prints to
0.866025403784439, which is close to 0.865. The difference is due to the fact that we rounded off the
length of the adjacent leg. For the triangle shown, the actual length is closer to 1.73205080756888. If you
divide that by 2, you get close to the actual cosine of -30 degrees.
So far, everything is taken from the lower-left angle. What if you look at things from the viewpoint of the
top-right angle? Well, first you need to reorient the triangle so that the angle in question aligns with the
coordinate system, as you can see in Figure 3-11. This is known as
putting the angle in standard position
(even though the canvas element “standard” is upside down and backward from the usual “standard”).
That angle is equal to 60 degrees, and as it's going clockwise, it's positive. The vertical measurement now
goes down from that angle, so it's positive. The horizontal measurement goes to the right, so it's positive,
too. (We added plus signs in the figure to point out the difference, but in general, this is not necessary;
values are positive unless specifically indicated as negative.)
