First you need an editor. You can work with notepad or something more fancy. I prefer to use something with code completion and some other useful features. Good choice for this is Netbeans. There are some lightweight editors but I haven't tried any of them as Netbeans is doing good work for me.
As I think learning by example is the fastest way from here on you will find mostly examples. Here is the basic structure of simple html5 document:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 tutorial</title>
<meta charset="UTF-8">
</head>
<body>
<div>Your content goes here</div>
</body>
</html>
There are few useful tags that will help you for your document structuring. They are pretty descriptive as names - article, section, aside, header, footer, nav, dialog, figure. As I am game developer most of them are not of interest for this tutorial. What is the most interesting part for today is the well known canvas. Canvas provides you with easy way to draw graphics with JavaScript. You can learn more about JavaScript and how to use it with canvas on part two of this tutorial. Here is how you place canvas on your html5 document:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 tutorial</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="drawBoard" width="300" height="300"></canvas>
</body>
</html>
And when you need to draw on the canvas you need to obtain the context:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 tutorial</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="drawBoard" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("drawBoard");
if (canvas.getContext){
var context = canvas.getContext('2d');
// start drawing
} else {
alert('Your browser doesn\'t support canvas');
}
</script>
</body>
</html>
And here is the way you do the drawing:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 tutorial</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="drawBoard" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("drawBoard");
if (canvas.getContext){
var context = canvas.getContext('2d');
// draw line
context.beginPath();
context.moveTo(30, 30);
context.lineTo(150, 150);
context.stroke();
} else {
alert('Your browser doesn\'t support canvas');
}
</script>
</body>
</html>
In part two I'll show you more about drawing on canvas including how to draw images on it.
No comments :
Post a Comment