HTML and CSS Reference
In-Depth Information
first ones. They should just roll off your fingers onto the keyboard whenever you need them. If you can't
remember them yet, just write it down on a piece of paper and tape it to your computer monitor. They are
even in JavaScript, using
Math.PI
, because that's how you type them over and over.
From this, you can easily see that 180 degrees is about 3.14 … radians. In other words, half a circle is pi
radians, which makes sense because a full circle is 2 pi. Going the other way, you can see that one radian
is roughly 57.29 … degrees.
The canvas coordinate system
Although we are on the subject of angles, this is a good time to describe how space is laid out in the
canvas element, numerically speaking. If you've dealt with any coordinate systems prior to this, you might
get a little dizzy here, because everything is upside down and backward.
The most common two-dimensional coordinate systems signify horizontal measurements with x and
vertical measurements with y—the canvas element does this, too. However, the zero x, zero y position (0,
0) is usually shown in the center, with positive x going off to the right, negative x to the left, positive y going
up, and negative y going down, as shown in Figure 3-3.
3
2
1
-3
-2
-1
0,0
1
2
3
-1
-2
-3
Figure 3-3.
A standard coordinate system
The canvas element, however, is based on a video screen coordinate system, where 0, 0 is at the top left,
as shown in Figure 3-4. The x values still increase from left to right, but the y axis is reversed, with positive
values going down and negative values going up. This system has its historical roots in the way the
electron gun scans the screen to build the picture—left to right, top to bottom—but it doesn't really matter.
That's the way it works, and it's not going to change anytime soon.
