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";
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
Example 5-1. Moving in a straight line
<!doctype html>
<html lang="en">
<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() {
function canvasSupport () {
return Modernizr.canvas;
function canvasApp() {
if (!canvasSupport()) {
function drawScreen () {
context.fillStyle = '#EEEEEE';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
context.strokeStyle = '#000000';
context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);
Search WWH ::

Custom Search