畫布上的人物動畫地圖路徑

Question

我創建了固定的城市，路徑很少。

在那個我想要，我可以從啓動到並點移到字符具體路徑。

這裏是canvas map

當我試圖在地圖上IY這個http://jsfiddle.net/nathggns/HG752/light/示例代碼的舉動只是顯示白色背景，而不是帆布城市地圖。

var canvas = document.getElementById('canvas'); 

if (canvas.getContext) { 
    // Grab our context 
    var context = canvas.getContext('2d'); 

    // Make sure we have a valid defintion of requestAnimationFrame 
    var requestAnimationFrame = 
     window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     window.mozRequestAnimationFrame || 
     window.msRequestAnimationFrame || 
     window.oRequestAnimationFrame || 
     function(callback) { 
      return setTimeout(callback, 16); 
     }; 

    // Let's define our square 
    var square = { 
     'x': 50, 
     'y': 50, 
     'width': 10, 
     'height': 10, 
     'fill': '#000000' 
    }; 

    var render = function() { 
     // Clear the canvas 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     // Draw the square 
     context.beginPath(); 
     context.rect(square.x, square.y, square.width, square.height); 
     context.fillStyle = square.fill; 
     context.fill(); 

     // Redraw 
     requestAnimationFrame(render); 
    }; 

    // Start the redrawing process 
    render(); 

    var animate = function(prop, val, duration) { 
     // The calculations required for the step function 
     var start = new Date().getTime(); 
     var end = start + duration; 
     var current = square[prop]; 
     var distance = val - current; 

     var step = function() { 
      // Get our current progres 
      var timestamp = new Date().getTime(); 
      var progress = Math.min((duration - (end - timestamp))/duration, 1); 

      // Update the square's property 
      square[prop] = current + (distance * progress); 

      // If the animation hasn't finished, repeat the step. 
      if (progress < 1) requestAnimationFrame(step); 
     }; 

     // Start the animation 
     return step(); 
    }; 

    animate('x', 0, 1000); 

    setTimeout(function() { 
     animate('y', 0, 1000); 

     setTimeout(function() { 
      animate('x', 50, 1000); 
      animate('y', 50, 1000); 
     }, 1000); 
    }, 1000); 

    var meta = function(e) { 
     // Set some initial variables 
     var distance = 100; 
     var prop = 'x'; 
     var mult = 1; 

     // Just return false if the key isn't an arrow key 
     if (e.which < 37 || e.which > 40) { 
      return false; 
     }; 

     // If we're going left or up, we want to set the multiplier to -1 
     if (e.which === 37 || e.which === 38) { 
      mult = -1; 
     } 

     // If we're going up or down, we want to change the property we will be animating. 
     if (e.which === 38 || e.which === 40) { 
      prop = 'y'; 
     }; 

     return [prop, mult * distance]; 
    }; 

    document.body.addEventListener('keydown', function(e) { 
     var info = meta(e); 
     if (info) { 
      e.preventDefault(); 
      animate(info[0], square[info[0]] + info[1], 1000); 
     }; 
    }); 

    document.body.addEventListener('keyup', function(e) { 
     var info = meta(e); 

     if (info) { 
      e.preventDefault(); 
      animate(info[0], square[info[0]], 1000); 
     }; 
    }); 
}; 

在此先感謝！

Answer 1

我不會給你完整的代碼，但會告訴你怎麼走。不要忘記使用幾個圖層。它快100倍。 http://jsfiddle.net/HG752/7/

想想也有地圖的數字智能版本，你可以檢查的一舉一動。像矩陣，其中1塊是10x10像素有真/假。同樣在重繪只做最小的事情。例如，在每次重繪時計算var img_back和var imgData是個大錯誤。但這只是一個例子:)

var canvas = document.getElementById('canvas'); 
var canvas_back = document.getElementById('canvas_back'); 
... 
var img_back = canvas_back.getContext('2d').getImageData(0, 0, W, H); 
var imgData = img_back.data;  
var x = (Math.round(square.x) + Math.round(square.y)*W) * 4; 
//get background color where i am 
document.getElementById('log').innerHTML = imgData[x]+'+'+imgData[x+1]+'+'+imgData[x+2];