RSS Feed

  1. Simple Canvas HTML5 – Making it move

    January 28, 2012 by dan

    Following on from creating a circle with HTML5 and canvas. We’re now going to make the circle move.

    You might wonder how you can make it move, using standard elements? Well think back to flash(all those years ago) and how you would rely on frames for movement. It’s the same principal in Javascript. We initialise the “frames” by creating an init function (you can call it what you like) that will call a function every 10 milliseconds and in that function, we would clear the canvas and redraw it further on, creating what seems like movement. 

    function init(){
  return setInterval(update,10);
}

function update(){ ... }

    So, an update to the last tutorial. To make it more efficient I’ve had to restructure the Javascript and move it around a bit. 

    $(function(){ // page load
    var c = $("#tut1canvas")[0].getContext('2d'); // this is loading in the canvas element.
    var x = 50;
    var y = 50;

     function init(){
        return setInterval(update,10);
     }

     function update(){
        c.clearRect(0,0,500,500);
        c.beginPath();
        c.fillStyle = '#ccc';
        c.arc(x,y,25,0,Math.PI*2,true);
        c.fill();
        x += 2;
        y += 2;
     }

     init();
});

    This should send the ball on a direct diagonal line, see picture below:

    Moving circle..

    Moving circle..

    So, what happened? Well, we’re using a new function for one.

    clearRect(x,y,width,height);

    clearRect clears all pixels within the dimensions that you specify. X and Y are the coords from the top left of the canvas and width and height is the width/height, in pixels, of the rectangle in relation to the coords of the canvas. Pretty much the same.

    The important bit to the movement is the clearRect and the last 2 lines of the update function.

    1. x += 2;
    2. y += 2;

    What this is doing, is every 10 milliseconds it’s adding 2px to the x and y of the current arc. We are passing the arc x and y as the coords when it’s being drawn, so every time we update it – it gets redrawn 2px on the x and y. If you were to set one of these variables to be a negative value, then the circle would move backwards. The best way to learn is to give it a try, if you break the code then reset it and try again.

    Category Uncategorized | Tags: , , , , , | No Comments

  2. Simple Canvas HTML5 – Creating a circle

    January 28, 2012 by dan

    Hi,

    Please note that all of these tutorials will use jQuery. If you are wondering why.. then why not?

    Ok, now the start to pretty much all that we’ll cover here will be the canvas element. To create this is simple, on it’s own you wont see any difference to your page, but that’s where the javascript comes in. Also, notice the incredibly simple doctype that is introduced in HTML5. See page setup below.

    <!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
			$(function(){ // page load
				var c = $("#tut1canvas")[0].getContext('2d'); // this is loading in the canvas element.

				c.beginPath();
				c.fillStyle = '#ccc';
				c.arc(250,250,150,0,Math.PI*2,true);
				c.fill();

			});
		</script>
  </head>
<body>
  <canvas id="tut1canvas" width="500" height="500" style="border:1px solid #000;"></canvas>
</body>
</html>

    Below is what you should have output on your screen:

    canvas-basic

    canvas-basic

    Ok so, what does all that mean?

    • var c = $(“#tut1canvas”)[0].getContext(’2d’);

      Simple – Just grabs the canvas so we can play with it in our Javascript.

    • c.beginPath();

      This creates the path in the canvas, so we can use the arc function

    • c.fillStyle = ‘#ccc’;

      Set the colour to fill the arc with

    • c.arc(x,y,radius,startingAngle,endingAngle,counterclockwise);

      The arguments that the arc takes.For a more detailed explanation see this post on canvas tutorials.

    • c.fill();

      This fills in the arc. If you were to use .stroke(); then it would perform a stroke on the angles of the arc function.

    In the next post, we’ll make it a bit smaller and then start moving it round the screen.

    Category Uncategorized | Tags: , , , | No Comments

  3. HTML5 Basics – Coming soon

    January 27, 2012 by dan

    We’ll cover the very basics of HTML5 up to the incredibly complex. Please note that all tutorials will use jQuery. To start with, we’ll learn about the canvas element and simple things like plotting objects on it etc.

    Category Uncategorized | Tags: | No Comments