Results 1 to 9 of 9
Thread: HTML5 Canvas Animation
-
09-16-2011, 05:07 PM #1Junior Guru Wannabe
- Join Date
- Sep 2011
- Posts
- 74
HTML5 Canvas Animation
Since I'm relatively new to the board, I'd thought I'd give a little demonstration on the ease of animations on an HTML5 canvas element. Other tutorials show how to draw, I thought I'd touch base on how easy it is to animate.
What is Canvas :
Canvas is a (semi-)new feature of modern browsers that allows Javascript to draw and create graphics inside an element.
What could it be used for :
Just like Java and Flash, it could be used to make some cool games. Also, someday it could be used to eliminate the need for some unneeded images, therefore reducing bandwidth.
Learning Curve :
Easy, if you know a bit of Math and Javascript, you are good to go. Flash game designers should find it a walk in the park.
#1. The canvas element
Use this :
Code:<canvas id="canvas" height="300px" width="500px"></canvas>
Code:<canvas id="canvas" style="height:300px; width:500px"></canvas>
#2. Get the canvas element
Code:canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d");
#3. Let's Draw!
Code:ctx.beginPath(); ctx.fillRect(10,10,30,30); ctx.closePath();
#4. Let's make it move
To make it move we have to use a timer and erase the canvas every time (or we will get a smudge mark). For fun, we will create a player object, with an X and Y.
Code:player = new Object(); player.x = 10; player.y = 10; setInterval(draw,100); function draw(){ canvas.width = canvas.width; ctx.beginPath(); ctx.fillRect(player.x,player.y,30,30); ctx.closePath(); player.x++; }
At the end, you see that the player.x value gets an increment of 1.
That is it! I haven't tested the code but it should work. Copy and paste what is below into a HTML file and give it a go.
Code:<!DOCTYPE HTML> <head></head> <body> <canvas id="canvas" height="300px" width="400px" style="border:1px solid #000"></canvas> <script> player = new Object(); player.x = 5; player.y = 5; canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); setInterval(draw,100); function draw(){ canvas.width = canvas.width; ctx.beginPath(); ctx.fillRect(player.x,player.y,30,30); ctx.closePath(); player.x++; } </script> </body> </html>
Although a bit basic, you should have the jist of it. With what you have here, your next step could be to add keyboard controls, or maybe have it follow your mouse.
Good luck in the future to other programmers!
-
09-26-2011, 03:51 PM #2Newbie
- Join Date
- Sep 2011
- Posts
- 6
thank you, good info
-
09-26-2011, 04:29 PM #3Junior Guru Wannabe
- Join Date
- Jun 2011
- Location
- America/Mexico_City
- Posts
- 98
Oh.. nice!
★ⓈⓊⓅⒺⓇ★ⓀⒶⓁⒾⒹ★
-
09-27-2011, 02:40 PM #4Junior Guru Wannabe
- Join Date
- Sep 2011
- Posts
- 74
Thanks for checking it out!
-
01-10-2012, 05:23 AM #5New Member
- Join Date
- Jan 2012
- Posts
- 4
Thanks, thatīs really cool. Do you see Java Scripts disappearing completely in a couple of years due to HTML5? I mean, with the whole focus switching to mobile and whatnot.
-
01-10-2012, 10:24 AM #6Junior Guru Wannabe
- Join Date
- Sep 2011
- Posts
- 74
Well their a bit of two different things. A lot of HTML5's new features rely on Javascript (web sockets, gamepad api, postmessage etc).
The only way Javascript will disappear is if PHP, ASP.NET and the other languages that use it for AJAX disappear.
If anything, I think it'll become more and more used as browsers and computers become faster.
-
10-10-2012, 07:38 PM #7Disabled
- Join Date
- Oct 2012
- Posts
- 25
This is some good info. I have worked a bit with canvas animation and once you get started, it is pretty easy to pick up on the basics. It really does add a lot to a site and there is so much that one can do to make the site look attractive and unique.
-
12-23-2012, 01:42 AM #8New Member
- Join Date
- Dec 2012
- Posts
- 4
Thanks for this tutorial. I know html5 but I did not use canvas. But now I am interested on canvas. Thanks to you again.
-
02-17-2013, 01:21 AM #9Junior Guru Wannabe
- Join Date
- May 2012
- Location
- Delhi, India
- Posts
- 66
Pretty great for a HTML5 beginner like me.
All i know is about Audio/Video integration properly now.
Thanks for the great & simple tutorial.
Similar Threads
-
Javascript/Canvas gallery
By Mike Taylor in forum Employment / Job OffersReplies: 2Last Post: 04-20-2011, 07:20 PM -
Canvas Systems emailed me...
By HOD-Jardin in forum Web Hosting LoungeReplies: 6Last Post: 02-09-2010, 06:43 PM -
Animator vs Animation - For people dealing with animation
By unity100 in forum Web Hosting LoungeReplies: 0Last Post: 04-07-2008, 08:56 AM -
Deneba's CANVAS 7 Plug-ins (Free)
By Cosmos75 in forum Web Design and ContentReplies: 0Last Post: 07-13-2004, 10:59 AM