HTML5与大对象等距

Question

我在HTML5 Canvas（<canvas id="canvas" width="640" height="480"></canvas>）中有一个例子。这是JavaScript代码（JSFiddle link）：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var table = new Image();
table.src = 'http://s1.postimage.org/188qzfays/table.png';

var image1 = new Image();
var image2 = new Image();
image1.src = 'http://s4.postimage.org/1fxt9xtyc/floor_standard.png';
image2.src = 'http://s2.postimage.org/1a4erdun8/floor_standard2.png';

var objImage = new Image();
objImage.src = 'http://s4.postimage.org/1fxzw37xg/tree.png';

var tileArray = [image1, image2];
var objArray = [objImage];

var tileW = 16;
var tileH = 16;

var map = [
    [1, 0, 0, 0, 0],
    [0, 1, 1, 0, 0],
    [0, 0, 1, 1, 0],
    [0, 0, 0, 1, 0],
    [0, 0, 0, 1, 0]
];
var objMap = [
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0]
];


for(var i = 0; i < map.length; i++) {
    for(var j = 0; j < map[i].length; j++) {
        var drawTile = map[i][j];
        var objTile = objMap[i][j];
        var xpos = (i-j) * tileH + 100;
        var ypos = (i+j) * tileH / 2 + 100;
        context.drawImage(tileArray[drawTile], xpos, ypos);
        if(objMap) {
            context.drawImage(objArray[objTile], xpos, ypos - 32);
        }
    }
}

此示例可以渲染等距切片和等距对象，但我只能在一个切片中绘制对象（例如，我无法在4个切片中绘制对象）。 如何在多个图块中绘制等距对象？ 像这个对象（在我的代码中，它存储在一个名为table的变量中）：

Answer 1

这对我来说似乎很合适。

我修改了一些你的代码来绘制一个表而不是一个树，但是这个：http://jsfiddle.net/9ZH4h/2/对我有用。我在输出中看到以下内容（在chrome和ff下）：

这是你想要的ouptut吗？

Answer 2

任何大于单个等值线的图像都需要计算其偏移量 - 这是没有真正的公式，你必须摆弄它直到它适合...然后将其存储在一个带有一些id的数组中以识别它。

然后，当绘制表格时，从数组中获取偏移量并在绘制之前将其添加到最终位置。