We will start by looking at some code in the <body> section of your page:
<body onload="canvasDogRaces()" bgcolor="#339999"><h3>
<div id="rowOne_text">Welcome to the Races</div>
<div id="rowTwo_text">Pick Your Dog</div>
</h3>
<canvas id="myCanvas" width="840" height="400" ;">
</canvas>
</body>
We have a couple of things going on here. In the <body> tag, we are telling the computer to wait until the whole page is loaded and then go find a function in the script called: canvasDogRaces() and execute it. That will start the whole game.
In the <canvas> element, we give it an id, "myCanvas" and set the width and height.
Now let's look at the script:
var canvasLeft = 120;
function canvasDogRaces(){
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext){
ctx = canvas.getContext("2d");
ctx.fillStyle = "#007777";
ctx.rect(canvasLeft,0,600,400);
ctx.fill();
}else{
alert("Your browser does not/n support 'Canvas'");
}
}
Make sure everyone is playing by the same rules:
It is probably best that you build into your code a test to make sure that the browser your user is running will support canvas. I found this example online and it works well for me.We start by setting up a global variable: canvasLeft that we will use for referencing our images on the canvas.
The first thing the function does is attempts to find the HTML element <canvas> that we have ID'd as myCanvas. A cool thing about HTML is that usually it ignores things that it doesn't understand. So if the browser doesn't know what the heck a canvas is, the line canvas.getContext will come up false and the flow will jump to the else part of the structure. If the browser is compatible we're ready to go. We can write some code.
Now that we know it works, we assign the context to a variable that we will use throughout the projected: ctx = canvas.getContext("2d");
ctx becomes our canvas and we can play all we want with it.
This simple code simply lays out a background that we can work on. You can copy the full code below, paste it into your editor, and then load the page in your browser. You will see that we have drawn a rectangle that is offset from the edge of the window. This leaves a bit of buffer space that will come in real handy when you are trying to move images around on the background. You can park images there where the background color is different. This will help you debug your code and get stuff the way you want it. We can talk about getting rid of the work space buffer later. Leave it there for now. You will soon see why it is so helpful.
Here is the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=1;">
<title>Dog Race</title>
<style>body{color:#FFFFFF}</style>
<script type="text/javascript">
var canvasLeft = 120;
function canvasDogRaces(){
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext){
ctx = canvas.getContext("2d");
ctx.fillStyle = "#007777";
ctx.rect(canvasLeft,0,600,400);
ctx.fill();
}else{
alert("Your browser does not\n support 'Canvas'");
}
}
</script>
</head>
<body onload="canvasDogRaces()" bgcolor="#339999">
<h3>
<div id="rowOne_text">Welcome to the Races</div>
<div id="rowTwo_text">Pick Your Dog</div>
</h3>
<canvas id="myCanvas" width="840" height="400" ;">
</canvas>
</body>
</html>
No comments:
Post a Comment