make interactive animation on the webpage using HTML5? - Javascript Canvas

Javascript examples for Canvas:Animation

  1. HOME
  2. Javascript
  3. Canvas
  4. Animation

Description

make interactive animation on the webpage using HTML5?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <style id="compiled-css" type="text/css">

body {//from   w w  w. j  a  va  2s .co  m
   background-color: ivory;
}
canvas {
   border:1px solid red;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var canvasOffset = $("#canvas").offset();
        var offsetX = canvasOffset.left;
        var offsetY = canvasOffset.top;
        var img = new Image();
        img.onload = function () {
            draw();
        }
        img.src = "http://dsmy2muqb7t4m.cloudfront.net/tuts/218_Trace_Face/10B.jpg";
        var x = 200;
        var y = 200;
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(img, x, y, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
        }
        function handleMouseDown(e) {
            mouseX = parseInt(e.clientX - offsetX);
            mouseY = parseInt(e.clientY - offsetY);
            // Put your mousedown stuff here
            if (mouseX < canvas.width / 2 && x > 0) {
                x -= 10;
            }
            if (mouseX >= canvas.width / 2 && x < canvas.width) {
                x += 10;
            }
            if (mouseY < canvas.height / 2 && y > 0) {
                y -= 10;
            }
            if (mouseY >= canvas.height / 2 && y < canvas.height) {
                y += 10;
            }
            draw();
        }
        $("#canvas").mousedown(function (e) {
            handleMouseDown(e);
        });
    });

      </script> 
   </head> 
   <body> 
      <p>Click in the image to reveal in the direction of the click</p> 
      <canvas id="canvas" width="320" height="240"></canvas>  
   </body>
</html>

Related Tutorials