HTML and CSS Reference

In-Depth Information

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

setInterval(drawScreen, 33);

}

</script>

</head>

<body>

<div style="position: absolute; top: 50px; left: 50px;">

<canvas id="canvasOne" width="500" height="500">

Your browser does not support HTML5 Canvas.

</canvas>

</div>

</body>

</html>

Moving on a Vector

Moving between two points is handy, but sometimes you don't have a point to move

to, only a point to start from. In cases like this, it can be very useful to create a
vector

as a means to move your object.

A
vector
is a quantity in physics that has both magnitude and direction. For our pur-

poses, the magnitude will be the
speed
of the moving object, and the direction will be

an
angle
that the object will move upon.

The good news is that moving on a vector is very similar to moving between two points.

In
canvasApp()
, we first set our
speed
(magnitude). This is the number of pixels the

object will move on every call to
drawScreen()
. We will set this to
5
. We will also set

the starting point (
p1
) for the object to
20
,
20
:

var speed = 5;

var p1 = {x:20,y:20};

Now, we will set the
angle
(direction) of movement for our object to
45
degrees. In

mathematics, a flat, straight line usually represents the 0 angle, which means a vector

with an angle of 45 degrees would be down and to the right on the canvas.

With our angle set, we now need to convert it to radians. Radians are a standard unit

of angle measurement, and most mathematical calculations require you to convert an

angle into radians before you can use it.

So why not just use radians and forget degrees altogether? Because it is much easier to

understand movement in degrees when working with vectors and moving objects on a

2D surface. While a circle has 360 degrees, it has just about 6 radians, which are cal-

culated counterclockwise. This might make perfect sense to mathematicians, but to

move objects on a computer screen, angles are much easier. So, we will work with