HTML and CSS Reference
In-Depth Information
}
canvasApp();
}
Then in canvasApp() , we create a variable named easeValue , which represents the per-
centage to move the ship across the remaining distance between the two points. In our
example, it is 5% ( .05 ):
var easeValue = .05;
Next, we create our two points. The first point, p1 , is close to the middle of the canvas
on the y-axis, and just above the top ( -20 ) on the x-axis. The final point, p2 , is in the
same place on the x-axis, but near the bottom of the canvas ( 470 ) on the y-axis:
var p1 = {x:240,y:-20};
var p2 = {x:240,y:470};
Finally, we create a dynamic object for the ship that holds these values:
var ship = {x:p1.x, y:p1.y, endx: p2.x, endy:p2.y, velocityx:0, velocityy:0};
In drawScreen() , on every frame, we first find out the distance between the ship and
the endpoint by subtracting the current x and y values for the ship from the endpoint
x and y values. The distance will get shorter on each call to drawScreen() as the ship
moves farther away from p1 and gets closer to p2 . We do this for both x and y even
though, in our example, only the y value will change as the spaceship gets closer to p2 :
var dx = ship.endx - ship.x;
var dy = ship.endy - ship.y;
Once we have the distances, we multiply those values by easeValue to get the x and y
velocities for the ship on this call to drawScreen() :
ship.velocityx = dx * easeValue;
ship.velocityy = dy * easeValue;
Finally, we apply those values and draw the spaceship to the canvas:
ship.x += ship.velocityx;
ship.y += ship.velocityy;
context.drawImage(shipImage,ship.x,ship.y);
You can test this example by executing CH5EX18.html from the code distribution in