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

在 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

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

1 个答案: