如何在画布上绘制等距地板？

Question

到目前为止，我有以下代码。它在 HTML5 画布上绘制一行等距图块。但是，我想创建一个完整的楼层，而不仅仅是一行，尽管我尝试了很多，但还是失败了。

function createEmptyMapRow(x, r /* The offset in tiles. Setting this to 1 draws one row down. */)
{
    var cx = 0, lx = 0, ly = 0;
    while(cx != x)
    {
        renderImage(lx - (r * 32), ly + (r * 14), 'tile.png');
        lx = lx + 32;
        ly = ly + 14;
        cx++;
    }
}

如果你不想写代码，就给我一些逻辑。

我希望能够创建一个函数，为每一行从左到右放置图块。

Answer 1

这个网站上有一个关于等距瓷砖的好资源。

本质上，您需要将等轴测点映射到笛卡尔（这是正常的屏幕坐标），反之亦然（如果要将用户输入映射到等距网格）

但是建立在你所拥有的基础上，不知何故这似乎有效

var c = cs.getContext("2d")
//size of grid is 2:1
var gridWidth=128
var gridHeight=64

//sprite could be taller
var spriteWidth=gridWidth
var spriteHeight=img.height/img.width*gridWidth

//always resize canvas with javascript. using CSS will make it stretch
cs.width = window.innerWidth    //ie8>= doesn't have innerWidth/Height
cs.height = window.innerHeight  //but they don't have canvas
var ox = cs.width/2-spriteWidth/2
var oy = spriteHeight

function renderImage(x, y) {
   c.drawImage(img, ox + (x - y) * spriteWidth/2, oy + (y + x) * gridHeight/2-(spriteHeight-gridHeight),spriteWidth,spriteHeight)
}

for(var x = 0; x < 10; x++) {
for(var y = 0; y < 10; y++) {
    renderImage(x,y)
}}

示例小提琴