In this tutorial, we will create a triangle and allow the user to zoom in or zoom out the picture. Before we get started lets set up our environment. All you'll need is your web browser and a text editor.
Open your text editor (notepad will work just fine) and enter the following:
<html>
<head>
<script type="application/x-javascript">
function draw() {
alert("hi");
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
This is our template that we will use for the rest of the tutorial. We've added a canvas element and when the HTML body is loaded our draw() function will be called.
If you save the text file and load it in your browser it should print a message box saying 'hi'. If not please re-read the above until you have this working.
Continue to Part 2
1 comment:
http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/06/29/game-development-with-javascript-and-the-canvas-element.aspx
A nice tutorial series for anyone looking to get more out of the canvas element
Post a Comment