Movement multiple objects in canvas to x,y coordinate - Javascript Canvas

Javascript examples for Canvas:Object

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

Description

Movement multiple objects in canvas to x,y coordinate

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <script src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

canvas{border:1px solid red;}

      </style> 
      <script>
    $(function(){/*w  ww. j a  v a2  s. c  om*/
        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        window.requestAnimFrame = (function(callback) {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
        })();
        var shapes=[];
        shapes.push({startX:10,  startY:10,  endX:140, endY:140, color:"red"});
        shapes.push({startX:280, startY:10,  endX:150, endY:140, color:"green"});
        shapes.push({startX:10,  startY:280, endX:140, endY:150, color:"blue"});
        shapes.push({startX:280, startY:280, endX:150, endY:150, color:"gold"});
        var pct=0.00;
        var fps = 60;
        animate();
        function animate() {
            setTimeout(function() {
                pct+=.01;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                for(var i=0;i<shapes.length;i++){
                    var shape=shapes[i];
                    var dx=shape.endX-shape.startX;
                    var dy=shape.endY-shape.startY;
                    var nextX = shape.startX + dx * pct;
                    var nextY = shape.startY + dy * pct;
                    var shape=shapes[i];
                    ctx.fillStyle=shape.color;
                    ctx.fillRect(nextX,nextY,7,7);
                }
                if(pct<1.00){requestAnimFrame(animate)};
            }, 1000 / fps);
        }
    }); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="350" height="350"></canvas>  
   </body>
</html>

Related Tutorials