HTML Canvas 中的空白与 javascript答案

【问题标题】：Gaps in HTML Canvas with javascriptHTML Canvas 中的空白与 javascript
【发布时间】：2020-08-09 09:04:50
【问题描述】：

我正在使用 AngularJS 编写游戏，但我遇到了一个我认为是 tile 大小配置的问题。

这是我的应用程序的屏幕：

如您所见，左侧的图块被边框分割，而不是右侧。使用不同的屏幕尺寸，它会更加明显。

我的地图基于窗口大小和图块。

// Canvas size
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight-90; // minus menu size

// Camera size
function Camera(map, width, height) {
    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.maxX = map.cols * map.tsize - width;
    this.maxY = map.rows * map.tsize - height;
}

// Tile size
tsize: window.innerWidth/20

代码基于 MDN 教程： Link to the Game Development tutorial

【问题讨论】：

可以放完整代码还是太大了？
它会太大，但如果你愿意，我可以发布一部分。我有几个对象：控制整个配置和渲染的游戏，显示游戏一部分的相机，用于精灵导入的加载器，具有图块大小的地图对象。

标签： javascript html angularjs canvas

【解决方案1】：

这可能只是由于渲染图块时的舍入问题。这可能是由于相机位置不均匀或变焦造成的。
尝试在磁贴大小上使用ceil()，或者将其稍大一点。

【讨论】：

我厌倦了 ceil() 确实是舍入的问题，但我认为具有精确的尺寸不会产生间隙，原因是什么？我仍然有最初的问题，我正在尝试用您的解决方案解决它
在 tsize 上有一个 parsInt()？