A Pen by Michael Dobekidis.

Canvas-map-path-[animated].markdown

Canvas map path [animated]

making the path of a map with KineticJS, canvas. Now it is animated...

A Pen by Michael Dobekidis on CodePen.

License.

index.html

<div id="bg"></div>
<div id="container"></div>

script.js

var map = "http://i221.photobucket.com/albums/dd22/djmid71/printable-treasure-map-for-kids-1_zps76cd5063.png";
var player = "http://i221.photobucket.com/albums/dd22/djmid71/Untitled-1_zps3d6ab0c7.png";
var stage;
var points = [   160,360,
                 200,380,
                 300,380,
                 350,360,
                 350,210,
                 400,190,
                 450,180,
                 500,170,
                 580,160,
                 590,200,
                 600,250,
                 600,310,
                 650,310,
                 700,310,
                 800,300,
                 810,320,
                 820,360,
                 820,380,
                 820,420,
                 820,500,
                 820,530,
                 750,530,
                 700,530,
                 650,520,
                 620,510,
                 610,490,
                 600,450,
                 580,445,
                 520,445,
                 510,460,
                 490,500,
                 480,530,
                 480,550,
                 460,600,
                 450,610,
                 440,610,
                 400,620,
                 300,610,
                 220,610];
$(document).ready(function(){
  
  stage = new Kinetic.Stage({
        container: 'container',
        width: 1024,
        height: 768
      });
    
   var layer = new Kinetic.Layer();
   stage.add(layer);
   var mapGroup = createMap(stage, layer);
   createPlayer(stage, layer, mapGroup);
  
   
});

function createMap(stage, layer) {
  var group = new Kinetic.Group();
  var _map = new Image();
  _map.onload = function() {
    var img = new Kinetic.Image({
      image:_map
    });
    group.add(img);
    layer.add(group);
    stage.draw();
    
    var path = makePath(stage, layer, group);
    animatePath(path);
  };
  
  _map.src = map;
  
  return group;
}

function createPlayer(stage, layer, group){
  
  var _player = new Image();
  _player.onload = function() {
    var img = new Kinetic.Image({
      image:_player,
      x:120,
      y:80,
      scaleX:0.2,
      scaleY:0.2
    });
    group.add(img);
    stage.draw();
  };
  
  _player.src = player;
  
}

function makePath(stage, layer, group) {
  var path = new Kinetic.Line({
        points: [160,90
                ],
        stroke: 'green',
        strokeWidth: 5,
        lineCap: 'round',
        tension: 0.5,
        dash: [10, 10]
      });
  
  group.add(path);
  stage.draw();
  return path;
}

function animatePath(path){
  setTimeout(addPoint,600,[path]);
}

function addPoint(path){
  path = path[0];
  window.console.log(path);
  var _points = path.points();
  var pointA = points[_points.length-2];
  var pointB = points[_points.length-1];
  
  window.console.log(_points, _points.length, points.length );
  
  _points.push(pointA);
  _points.push(pointB);
  
  window.console.log(_points, pointA, pointB);
  path.points(_points);
  stage.draw();
  if(_points.length-2 >= points.length){}
  else{
    setTimeout(addPoint,600,[path]);
  }
}

style.css

body{
  margin:0px;
  padding:0;
}

#bg{
  width:100%;
  height:100%;
  position:fixed;
  background: #63b6db; /* Old browsers */
background: -moz-linear-gradient(top,  #63b6db 0%, #309dcf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63b6db), color-stop(100%,#309dcf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #63b6db 0%,#309dcf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #63b6db 0%,#309dcf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #63b6db 0%,#309dcf 100%); /* IE10+ */
background: linear-gradient(to bottom,  #63b6db 0%,#309dcf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63b6db', endColorstr='#309dcf',GradientType=0 ); /* IE6-9 */

}