HTML and CSS Reference
In-Depth Information
In the
drawScreen()
function, we update the value of
y
by adding to it the value of the
speed
variable:
y += speed;
Finally, we draw our circle on the canvas. We position it using the current value of
x
and
y
. Since
y
is updated every time the function is called, the circle effectively moves
down the canvas:
context.fillStyle = "#000000";
context.beginPath();
context.arc(x,y,15,0,Math.PI*2,true);
context.closePath();
context.fill();
To move the circle up the screen, we would make
speed
a negative number. To move
it left or right, we would update the
x
instead of the
y
variable. To move the circle
diagonally, we would update both
x
and
y
at the same time.
Example 5-1
shows the complete code needed to create basic movement in a straight
line.
Example 5-1. Moving in a straight line
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX1: Moving In A Straight Line</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
function drawScreen () {
context.fillStyle = '#EEEEEE';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);
