hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Hosting Talk Tutorials : Programming Tutorials : HTML5 Canvas Animation
Reply

Forum Jump

HTML5 Canvas Animation

Reply Post New Thread In Programming Tutorials Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 09-16-2011, 05:07 PM
HostGrenade HostGrenade is offline
Junior Guru Wannabe
 
Join Date: Sep 2011
Posts: 69

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>
and not this :
Code:
<canvas id="canvas" style="height:300px; width:500px"></canvas>
Reason is because it skews the board, a round circle will be wider than normal. If you want it to fit the screen, you'll have to use

#2. Get the canvas element
Code:
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
I like to make these global variables, but you can make them local. Don't know what that means, don't worry about it right now.

#3. Let's Draw!
Code:
ctx.beginPath();
ctx.fillRect(10,10,30,30);
ctx.closePath();
This should draw a black square, 10 pixels from the top, 10 pixels from the left, 30px X 30px.

#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++;
}
The first line in the draw() function might be confusing, it is the simplest way (that I know of) of erasing the canvas element.
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>
Thanks for reading it
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!

__________________
Professional programming, web hosting and web design Cobourg, Ontario
Follow us on Twitter



Sponsored Links
  #2  
Old 09-26-2011, 03:51 PM
PhpMax PhpMax is offline
Newbie
 
Join Date: Sep 2011
Posts: 5
thank you, good info

  #3  
Old 09-26-2011, 04:29 PM
kalid kalid is offline
Junior Guru Wannabe
 
Join Date: Jun 2011
Location: > America/Mexico_City
Posts: 89
Oh.. nice!

__________________
ⓈⓊⓅⒺⓇⓀⒶⓁⒾⒹ
| | cPanel/WHM plugin developer

Sponsored Links
  #4  
Old 09-27-2011, 02:40 PM
HostGrenade HostGrenade is offline
Junior Guru Wannabe
 
Join Date: Sep 2011
Posts: 69
Thanks for checking it out!

__________________
Professional programming, web hosting and web design Cobourg, Ontario
Follow us on Twitter

  #5  
Old 01-10-2012, 05:23 AM
Hattrick Hattrick is offline
New Member
 
Join Date: Jan 2012
Posts: 3
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.

  #6  
Old 01-10-2012, 10:24 AM
HostGrenade HostGrenade is offline
Junior Guru Wannabe
 
Join Date: Sep 2011
Posts: 69
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.

__________________
Professional programming, web hosting and web design Cobourg, Ontario
Follow us on Twitter

  #7  
Old 10-10-2012, 07:38 PM
melodys melodys is offline
Disabled
 
Join Date: Oct 2012
Posts: 21
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.

  #8  
Old 12-23-2012, 01:42 AM
rushtelecom rushtelecom is offline
New Member
 
Join Date: Dec 2012
Posts: 3
Thanks for this tutorial. I know html5 but I did not use canvas. But now I am interested on canvas. Thanks to you again.

  #9  
Old 02-17-2013, 01:21 AM
yudi1 yudi1 is offline
Newbie
 
Join Date: May 2012
Location: Delhi, India
Posts: 12
Pretty great for a HTML5 beginner like me.
All i know is about Audio/Video integration properly now.
Thanks for the great & simple tutorial.

Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
Javascript/Canvas gallery Mike Taylor Employment / Job Offers 2 04-20-2011 07:20 PM
Canvas Systems emailed me... HOD-Jardin Web Hosting Lounge 6 02-09-2010 06:43 PM
Animator vs Animation - For people dealing with animation unity100 Web Hosting Lounge 0 04-07-2008 08:56 AM
Deneba's CANVAS 7 Plug-ins (Free) Cosmos75 Web Design and Content 0 07-13-2004 10:59 AM

Related posts from TheWhir.com
Title Type Date Posted
WhiteHouse.gov Continues Snooping With Unique Cookie Tracking Technology Web Hosting News 2014-07-28 09:31:44
11 Percent of Americans Believe HTML is an STD, and Other Surprising Findings Around Tech Jargon Blog 2014-03-04 15:36:03
Hostway Corporation Listing 2014-09-17 23:42:43
NoSQLNow 2013 Web Hosting Events 2013-08-09 15:40:53
Emerging Tech - HTML5 Blog 2013-05-29 10:54:46


Tags
canvas, html5

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:
WHT Membership
WHT Membership



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?