HTML and CSS Reference

In-Depth Information

Figure 7-10. Determining the point on a circle using trigonometric functions

In
Figure 7-10
,
the angle, theta, needs to be in radians, which equals the angle in de-

grees times pi divided by 180. Translated into code, the formula in
Figure 7-10
might

look like this:

x = 50 + Math.cos( 45 * Math.PI / 180 ) * 20;

y = 50 + Math.sin( 45 * Math.PI / 180 ) * 20;

This would find the x and y coordinates of a point that was at a 45-degree angle and

was 20 pixels out from another point at the x, y coordinate of 50, 50 on the canvas.

Let's look at a full example. This example draws a spiral on the canvas, the result of

which is shown in
Figure 7-11
. It runs a loop a number of times that increases the

distance from the center ("c" in
Figure 7-10
)
and increases the angle in degrees:

// declare the global variables

var canvas;

var context;

var centerX;

var centerY;

var degrees = 0;

var radius = 1;

function init() {

canvas = document.getElementById( "canvas" );

Search WWH ::

Custom Search