0

我创建了路径很少的固定城市。

在那我想创建一个特定的路径，我可以在其中移动角色从开始到指向。

这是画布地图

当我尝试这个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);
        };
    });
};

提前致谢 ！

4

1 回答 1

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];
于 2013-10-17T10:14:47.000 回答