缩放画布元素的坐标

Question

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

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

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

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

有没有其他我可以使用的单元，或者你建议我怎么做？

Answer 1

将画布宽度和高度属性设置为游戏区域大小

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

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

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

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

您需要缩放鼠标点击以对应于游戏坐标上的实际位置。所以如果你在(x，y)的画布上点击鼠标，你可以通过x=(x/ $('#mycanvas').width()) * 400和y得到游戏坐标上的位置。如果canvas不是全屏的，可以使用$('#mycanvas').offset()来获取点击坐标的增量。

Answer 2

永远不要在画布上使用CSS大小，它们会让事情变得非常丑陋。

您所写的内容并没有使画布达到页面的宽度，它使画布的宽度为300像素，高度为150像素(默认设置)，然后将其扭曲，直到达到页面的宽度和高度。

坚持使用Canvas拥有的宽度和高度属性，而不是使用CSS。

如果您希望使其与页面的大小相同，则还有其他选择，例如将画布放入div.style.clientWidth中，然后使canvas.width等于div。

要使用不同的(全屏或非全屏)窗口大小，请参阅我的答案，这里是关于“模型坐标”的：Working with canvas in different screen sizes