javascript - Canvas 中的中心等轴测图？

Question

我想知道如何设置 Canvas 来查看特定的网格点？

例如，我的等距 map 使用 x:y 坐标。当我加载 map 时， map 有些脱离了 Canvas ，大约有一半......所以我想将相机的中心设置为 map 的中心图 block 。这样整个网格就可以在 Canvas 中看到。

img.onload = function(){
tiles_wide = 18; 
tiles_long = 19; 

for (i=0;i<tiles_wide;i++){ //horizontal

  for (j=0;j<tiles_long;j++){ // vertical

    var x = (i-j)*(img.height/2);
    var y = (i+j)*(img.height/4);

    ctx.drawImage(img,x,y);
        }
    }

}

希望有人能帮忙:)

Answer 1

绘制图像时你可以这样做x+(tiles_wide/2)*tilewidth 与 y 相同。

所有碰撞和游戏功能仍将在正确的坐标上运行，但您将使用偏移量进行绘制，从而产生相机的错觉。

确保您仅在偏移处绘制，而不是在偏移处设置这些“对象”。

tilewidth var 应该是图 block 的宽度(以像素为单位)。这就是你所追求的吗？