HTML5 Canvas Tutorial
HTML5 Canvas revolutionized the use of graphics on web pages. Since it is fully compatible with all major browsers, the vendor-related issues do not arise when we use it. On the other hand, it can easily be manipulated with the most popular scripting language on the internet at present - JavaScript.
In this tutorial, you will see a series of animations created on Canvas while using JavaScript.
- The basics of canvas 2D context.
- How to draw shapes and then enhance quality using patterns and gradients.
- How to use canvas to create numerous impressive animations with JavaScript
Finding a good book to master HTML5 can be very challenging: there are so many around - most with eye-catching titles and very complex substance.
Therefore,
Vivax Solutions strongly recommends
Core HTML5 Canvas for those who really want to delve into HTML5.
Please click the image to access
Amazon:
Let's take the plunge straightaway.
The following code snippet shows a simple way of using JavaScript in a web page - the easiest way of showing interactivity.
Type in the following script code in a text editor such as Notepad, save the page as .htm.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Tutorial from Vivax Solutions</title>
<meta charset="UTF-8">
<script type="text/JavaScript">
alert('Welcome to Vivax Solutions');
</script>
</head>
<body>
</body>
</html>
Now press F5 and refresh your web page. You will get a trivial alert - and you ran the first JavaScript script successfully on a web page!
Note the presence of <!DOCTYPE html> at the top of HTML code; it is the only doctype declaration you need to get your HTML page up and running. It is as simple as that.
JavaScript commands must be written between <script></script>tags, as it is a script language. alert
is a JavaScript command that produced the message as an alert. Please note the following:
- 1) JavaScript is case sensitive
- 2) JavaScript commands must end with a semi-colon
JavaScript commands can be used to write things as the content of a web page. Look at the following script.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<script type="text/JavaScript">
document.write('My first web page is this. <br />It is pretty simple and plain');
</script>
</body>
</html>
Note the position of <br> tag. It helps start a new line whenever we need one.
In order to make use of the full potential of HTML5, you have to use JavaScript extensively. JavaScript is easy to learn and please follow this tutorial to master the language in a matter of hours.
Moreover, you can use this link to get a good knowledge in HTML5.
The following animation shows what can be achieved by the combination of HTML5 and JavaScript:
Magical HTML5 at Work - Interactive Spring
Please choose the speed, and then click the Run button.
Please stop the spring before changing the speed.
The source code for the animation is given below:
<!--hidden element to store the values for animation--------------->
<input type="hidden" id="h" value="0" />
<canvas id="Canvas_Two" width="400" height="300" style="border:2px solid red;" class="imgforcontent">
</canvas>
<!----radio buttons for speed control---------------------------->
<form name="spring" action="">
<input id="R4" name="speed" value="Slow" type="radio" />Slow<br /><br />
<input id="R5" name="speed" value="Medium" type="radio" />Medium<br /><br />
<input id="R6" name="speed" value="Fast" type="radio" />Fast<br /><br />
</form>
<!---------------buttons to start and stop the animation------------------------>
<div style="width:400px;">
<input type="button" style="float:left;margin-left:10px;" value="Run" onclick="anim1()" id="Animation" />
<input type="button" style="float:right;margin-right:10px;" value="Stop" onclick="window.clearInterval(xx)" id="Stopping" >
</div>
<canvas id="Canvas_Two" width="400" height="300" style="border:5px solid red"></canvas>
<script>
var canvas = document.getElementById('Canvas_Two');
var context1 = canvas.getContext('2d');
//code for static spring in grey colour
context1.beginPath();
context1.moveTo(200,0);
for(var i=0;i<=220;i++)
{
context1.lineTo(200 +20*Math.sin(5*i*Math.PI/180),i*0.5);
context1.lineWidth=5;
context1.strokeStyle='grey';
context1.stroke();
}
// code for the ball in blue colour
context1.beginPath();
context1.arc(200,100,35,0,2*Math.PI,false);
var grd = context1.createRadialGradient(200, 100, 5, 200, 100, 30);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, '#004CB3');
context1.fillStyle=grd;
context1.fill();
var a=1;
//code for the motion of the spring and the ball
function move(){
var x=eval(document.getElementById('h').value);
x=x+a
if (x==8){a=-1;}
if (x==4){a=1;}
context1.clearRect(0,0,400,300);
context1.beginPath();
context1.moveTo(200,0);
for(var i=0;i<=220;i++)
{
context1.lineTo(200 +20*Math.sin(5*i*Math.PI/180),i*x*0.1);
context1.lineWidth=5;
context1.strokeStyle='grey';
context1.stroke();
}
context1.beginPath();
context1.arc(200,x*20+40,35,0,2*Math.PI,false);
var grd = context1.createRadialGradient(200, x*20+40, 5, 200, x*20+40, 30);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, '#004CB3');
context1.fillStyle=grd;
context1.fill();
document.getElementById('h').value=x;
}
// code for timing
function anim1() {
if
(document.getElementById('R4').checked)
{ sp = 400; }
else if (document.getElementById('R5').checked) { sp = 300; }
else if (document.getElementById('R6').checked) { sp = 200; }
else
{ sp = 500; }
xx = window.setInterval('move()', sp);
}
// code for stopping
function stop1() {
//empty the hidden element on exit
document.getElementById('h2').value = 4;
window.clearInterval(xx);
}
</script>
"Where are the images?" you may wonder; there are no images. The ball, the spring and the gradient of the ball are produced only by combining HTML5 and JavaScript.
The rest of the tutorial is going to teach you how to produce similar effects by using HTML5, in the next few pages.
Please follow them in order; you will master the animations in a short period of time.
HTML 5 Canvas Tutorials