Open Technical Blog: HTML5 Canvas

This script shows how to perform simple animations with Canvas in HTML5. The following techniques are adopted:

Canvas for graphics.
Draw circles.
Use setInterval() to set up a timer trigger.

Output

When the file is viewed in a browser such as Chrome or Firefox, it appears as below. Note that the black ball is bouncing on the canvas frame.

Source Code

<!DOCTYPE HTML>
<html>
  <head>
 <style>
      body {
        margin: 10px;
        padding: 10px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var x = 0;
        var y = 0;
        var dx = 2;
        var dy = 2;
        var r = 20
        var context, canvas;

        function init() {
          canvas = document.getElementById("myCanvas");
          context = canvas.getContext("2d");
          return setInterval(draw, 10);
        }

        function draw() {
          context.clearRect(0,0,canvas.width,canvas.height);
          // draw at current position
          context.beginPath();
          context.arc(x, y, r, 0, Math.PI*2, true);
          context.fillStyle = 'black';
          context.fill();
          // move to next position
          x += dx;
          y += dy;
          // collision detection
          if (x>canvas.width-r) {
            dx=-dx; x=canvas.width-r;}
          if (x<r) {
            dx=-dx; x=r; }
          if (y>canvas.height-r) {
            dy=-dy; y=canvas.height-r; }
          if (y<r) {
            dy=-dy; y=r; }
        }

        init();
      }
    </script>
  </head>
  <body>
 This is a HTML5 Canvas Experiment.</br>
 </br></br>
    <canvas id="myCanvas" width="600" height="400"></canvas></br>
  </body>
</html>

Open Technical Blog

Thursday, 13 September 2012

HTML5 Canvas - Animation

Output

Source Code

No comments:

Post a Comment