javascript - 等轴测地板如何在 Canvas 上绘制？

到目前为止，我有以下代码。它在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++;
    }
}

如果您不想编写代码，请给我一些逻辑。

我希望能够创建一个功能，为每行从左到右放置磁贴。

最佳答案

关于this site上的等距图块，有很好的资源。

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

但是在您拥有的东西的基础上，这似乎可以工作

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)
}}

Example fiddle