如何使对象的 X 和 Y 位置响应 HTML Canvas 的宽度和高度？答案

【问题标题】：How to make an object's X and Y positions responsive to HTML Canvas's width and height?如何使对象的 X 和 Y 位置响应 HTML Canvas 的宽度和高度？
【发布时间】：2020-03-02 11:13:17
【问题描述】：

我正在使用 HTML5 Canvas 构建一个简单的游戏。

游戏在画布内有多个矩形。

问题是我使用 X 和 Y 坐标来控制矩形；游戏在我的显示器上运行良好——但是，如果我使用较小的显示器，对象可能会移到“地图”之外。如果我使用更大的显示器，我可以看到更多的“地图”。

我怎样才能让它响应？

这是我用来创建画布的部分代码：

    this.canvas.width = document.body.clientWidth - 15;
    this.canvas.height = 700;
    this.context = this.canvas.getContext("2d");

这几乎就是游戏循环中矩形的移动：

    cursor.x += 1;

【问题讨论】：

标签： javascript html css canvas html5-canvas

【解决方案1】：

确保同时设置画布宽度和高度，使它们不能大于屏幕尺寸。

然后，每次移动矩形时，添加一个检查以查看矩形是否仍在视口内。

比如：

if (cursor.x + 1 < this.canvas.width) {
  cursor.x += 1;
}

【讨论】：