Developer Resource: html

Showing posts with label html. Show all posts

Friday, September 12, 2008

HTML Canvas Element - Part 3

This is Part 3 of the HTML Canvas Tutorial. If you haven't already you should read Part 1 and Part 2.

In this section we will create a key press listener and zoom our triangle in when we press 'z' and out when we press 'x'.

To do this we add a onKeyUp event to the body tag, and a corresponding handleKeyUp javascript function:

function handleKeyUp(evt) {
       var e = evt ? evt : event;
       if (e.keyCode == 90) {
           scale+=.1;
       } else if(e.keyCode == 88) {
           scale-=.1;
       }
       draw();
   }


<body onload="draw();" onkeyup="handleKeyUp(event);">
  <canvas id="canvas" width="150" height="150"></canvas>
</body>

The variable scale is defined as a global javascript variable and we'll use it to call 'ctx.scale(x,y)'

Before we do that though we'll have to call clearRect(x,y,width,height) to clear the image and redraw. The entire script is displayed below:

<html>
<head>
 <script type="application/x-javascript">

   var scale=1;
   function draw() {
       // Get Reference to the 'canvas' tag
       var canvas = document.getElementById("canvas");       
       if (canvas.getContext){
           // Get a context that allows us to draw on.
           var ctx = canvas.getContext('2d');
           ctx.save();
           ctx.clearRect(0,0,canvas.width,canvas.height);           
           ctx.scale(scale,scale);

           // Move cursor and draw the outline of the Triangle
           ctx.beginPath();
           ctx.moveTo(0,100);
           ctx.lineTo(50,0);
           ctx.lineTo(100,100);
           ctx.lineTo(0,100);

           // Actually Draw, you could call stroke instead which will draw the outline
           ctx.fill();
           ctx.restore();

       }

   }
   function handleKeyUp(evt) {
       var e = evt ? evt : event;
       if (e.keyCode == 90) {
           scale+=.1;
       } else if(e.keyCode == 88) {
           scale-=.1;
       }
       draw();
   }


 </script>
</head>
<body onload="draw();" onkeyup="handleKeyUp(event);">
  <canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

That's it! I hope that got you interested in the Canvas element. If you have any questions leave a comment and I would be glad to answer them.

For more information I recommend the following sites:
http://developer.mozilla.org/en/Canvas_tutorial
http://en.wikipedia.org/wiki/Canvas_(HTML_element)
http://blog.vlad1.com/2008/06/04/html-canvas-in-firefox-3/

HTML Canvas Element - Part 2

In Part 1 of the series we set up a simple template to build the rest of the example on.

Our goal is to display a triangle and allow the user to zoom in and zoom out.

In this part we will display a black triangle on a white background. Replace your draw function with this one and then refresh your browser.

function draw() {
       // Get Reference to the 'canvas' tag
       var canvas = document.getElementById("canvas");       
       if (canvas.getContext){
           // Get a context that allows us to draw on.
           var ctx = canvas.getContext('2d');

           // Move cursor and draw the outline of the Triangle
           ctx.beginPath();
           ctx.moveTo(0,100);
           ctx.lineTo(50,0);
           ctx.lineTo(100,100);
           ctx.lineTo(0,100);

           // Actually Draw, you could call stroke instead which will draw the outline
           ctx.fill();
       }

   }

You should now see a black triangle on a white background. The code got a drawing context by calling canvas.getContext("2d").

We then use the moveTo command which picks up the cursor and moves to the location without drawing. Notice the coordinate system starts in the upper left with x extending to the right and y extending down.

We start our path with beginPath(). This will clear out any other draw commands and now your ready to trace your path with lineTo. One we have traced our triangle with the lineTo commands we call 'ctx.fill()' Which draws the shape and fills it with a solid color. Alternatively we could of called 'ctx.stroke()' which will draw the outline.

Continue to Part 3 to learn how to Zoom in/out the triangle.

HTML Canvas Element

The canvas html tag element allows web developers to draw graphics in the browser through a scripting language, typically JavaScript.

In this tutorial, we will create a triangle and allow the user to zoom in or zoom out the picture. Before we get started lets set up our environment. All you'll need is your web browser and a text editor.

Open your text editor (notepad will work just fine) and enter the following:

<html>
 <head>
  <script type="application/x-javascript">

    function draw() {
        alert("hi");
    }


  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

This is our template that we will use for the rest of the tutorial. We've added a canvas element and when the HTML body is loaded our draw() function will be called.

If you save the text file and load it in your browser it should print a message box saying 'hi'. If not please re-read the above until you have this working.

Continue to Part 2

Thursday, June 19, 2008

PHP redirect

If you want to redirect to another page in php use the header function to set a new location


   header("Location: redirectTo.html");
?>

Javascript setInterval, and setTimeout

Here is how you can set a timer in javascript.

setInterval(expression,interval)

or

setTimeout(expression,interval)

expression is a function that you want to call where interval is the time in milleseconds.

setInterval will repeatedly call the expression on the interval whereas setTimeout will call it only once.

Developer Resource