Lets start with part two of our tutorial. In this part I'll show how you can draw with html5 canvas. I'll try to keep the examples as simple as possible, just focusing on one feature at a time.
Basic drawing is actually easy. You can see how to draw a line from the last example in part 1I will continue with drawing a rectangle and then drawing a circle.
<!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 rectangle
context.beginPath();
context.rect(30,30,120,100);
context.stroke();
} else {
alert('Your browser doesn\'t support canvas');
}
</script>
</body>
</html>
<!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 circle
context.beginPath();
context.arc(100,100,80,0,2*Math.PI);
context.stroke();
} else {
alert('Your browser doesn\'t support canvas');
}
</script>
</body>
</html>
And here is a simple way to show text.
<!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){
// I can write text too
var context = canvas.getContext('2d');
context.font = "20px Arial";
context.fillText("Some Text",50,50);
// and stroke text
context.strokeText("More Text",50,100);
} else {
alert('Your browser doesn\'t support canvas');
}
</script>
</body>
</html>
In the next part I'll discus drawing images and animations. Here are some useful links where you can learn a lot more about canvas.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage
http://www.w3.org/TR/2dcontext/
No comments :
Post a Comment