javascript - 缩放的 Canvas 元素的坐标

Question

我已经使用了搜索引擎，但没有得到我想要的信息，所以我想问一下是否有人有好的方法/技巧在HTML5 canvas元素中使用自制坐标系。

我想使用 canvas 元素在 HTML5 中开发一个 2D 游戏，它应该适应整个浏览器窗口，如下所示:

<canvas style="width: 100%; height: 100%;">
     No support for your browser, unfortunately...
</canvas>

问题是我不知道应该如何管理游戏的坐标。 在我的游戏中，玩家例如当用户按下右箭头键时立即向右移动 32px，但是如果我调整 Canvas 元素的大小会发生什么？ 从逻辑上讲，游戏的“ block ”也会改变它们的大小，因此坐标的单位将不再是像素。

还有其他我可以使用的单元吗？或者你会建议我做什么？

Answer 1

设置 Canvas 宽高属性为游戏区域大小

<canvas id="mycanvas" width="400" height="300"/>

并将其样式设置为屏幕上所需的显示大小。

#mycanvas {
    width: 100%
    height: 100%
    display: block
}

现在您始终可以在代码中假设 Canvas 为 400x300，并且在绘制时忽略屏幕上的实际物理像素大小。

您需要缩放鼠标点击以对应游戏坐标上的实际位置。因此，如果您在 (x, y) 处的 Canvas 上单击鼠标，您将通过 x = ( x/$('#mycanvas').width()) * 400 和 y 获得游戏坐标上的位置。如果 Canvas 不是全屏，请使用 $('#mycanvas').offset() 获取点击坐标的增量。