HTML5 Canvas Diamond Isometric

时间:2011-07-31 16:53:21

标签: javascript html5 canvas isometric

我尝试创建一个等轴测图并按照:Drawing Isometric game worlds 我的抽奖代码是:

var tiles = [tile1, tile2, tile3];
var objTiles = [objTile1, objTile2, objTile3];
var map = [[0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]];
var obj = [[0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]];
var tileW = 16;
var tileH = 16;

for(var i = 0; i < map.length; i++) {
    for(var j; j < map[i].length; j++) {
        var a = map[i][j];
        var b = obj[i][j];
        var x = (i-j) * tileH;
        var y = (i+j) * tileH/2;
        context.drawImage(tiles[0], x, y);
        if(b) {
            context.drawImage(objTiles[0], x, y - 16);
        }
    }
}

在这里,我可以绘制对象尺寸相同的等距地图。但是如何绘制比一个瓷砖更大的物体?像是如何在4个瓷砖中绘制物体的东西?在此示例中,对象可以在一个图块中绘制。

简单的代码片段非常有用。

谢谢,抱歉我的英语。

0 个答案:

没有答案