如何只显示大地图的一部分？

如何解决如何只显示大地图的一部分？

我需要为游戏的副本绘制一个网格defly.io，但这是一件非常困难的事情，因为地图明显巨大。我想知道如何只显示您可以看到的非常大的地图的一部分（视图框）。地图的宽度和应该是约 2000 像素。我已经做了一个绘制网格的函数，你需要行号和高度号来表示网格将有多少行和列。但是如果我只想显示整个地图，那么它肯定会导致非常大的滞后。下面是我的尝试（根据参数创建一个包含多个行和列的表）：

function createGrid(rows,cols) {
    var table = document.createElement("table");
    var tbody = document.createElement("tbody");
    table.appendChild(tbody);
    for (var i = 0; i < 9; i++) {
        var tr = document.createElement("tr");
        for (var j = 0; j < 9; j++) {
            var td = document.createElement("td");
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    document.body.appendChild(table);
}

在这里，我基本上告诉它有一个表，并使用 appendChild() 函数以便有父元素，所以它不仅仅是许多没有任何联系的浮动元素。所以，我已经对此进行了测试，这 应该 给出一个带有以下 CSS 的表格：

body {
    margin: 0px;
    overflow: hidden;
}
td {
    border: 1px solid #ccc;
    width: 50px;
    height: 50px;
}
table {
    border-collapse: collapse;
}

这是我创建网格的最快方法吗？如果没有，那么最快最有效的方法是什么？

另外，我会制作一架直升机，直升机的炮塔应该朝向我的鼠标。我已经知道 atan2 函数，虽然我不知道我会在 600x600 画布大小和画布中间的直升机上输入什么参数（总是）。基本上，我只想以正确的方式使用 atan2，这样我就可以让直升机根据鼠标位置旋转它的炮塔。

注意：我使用的是可汗学院，所以有些东西可能不允许在那里。

我知道这个问题有两个问题，但我只是想挤一个。如果您对其中一个问题有任一的答案，请告诉我。 非常感谢！