| Share this post! | Vote this! |
|
One of the features of HTML5 Canvas is allowing you to create animation without any third-party software. There are some rumors said that, HTML5 Canvas would take over Adobe Flash in very near future. While some of the web communities are arguing about the possibility. Today, we are not going to talk about the issues in this tutorial, but shows you the live demo that HTML5 Canvas can achieve with the help of JavaScript.
In this tutorial, we will describe the making of bouncing ball animation with purely HTML5 and JavaScript.
The demo below give you an overview of the animation that we are going to build later.
HTML Code:
First, create a valid HTML5 document as shown below:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
</head>
<body>
<canvas id="myCanvas" width="568" height="262">
<!-- Insert fallback content here -->
Sorry, your browser doesn't support canvas technology
</canvas>
</body>
</html>
There is a very important thing you need to keep in mind when creating a valid HTML5 document, which is ‘DOCTYPE’. W3C was suggesting to declare HTML5 document as shown above. Besides, it’s a good practice that always provide the fallback content or message to the browsers that do not support canvas technology.
Ok. We had done the HTML5 structure, let’s move on to the JavaScript section.
More...
In this tutorial, we will describe the making of bouncing ball animation with purely HTML5 and JavaScript.
The demo below give you an overview of the animation that we are going to build later.
HTML Code:
First, create a valid HTML5 document as shown below:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas For Absolute Beginners | onlyWebPro.com</title>
</head>
<body>
<canvas id="myCanvas" width="568" height="262">
<!-- Insert fallback content here -->
Sorry, your browser doesn't support canvas technology
</canvas>
</body>
</html>
There is a very important thing you need to keep in mind when creating a valid HTML5 document, which is ‘DOCTYPE’. W3C was suggesting to declare HTML5 document as shown above. Besides, it’s a good practice that always provide the fallback content or message to the browsers that do not support canvas technology.
Ok. We had done the HTML5 structure, let’s move on to the JavaScript section.
More...
0 comments:
Post a Comment