Question

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

我想使用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得到游戏坐标上的位置。如果画布不是全屏，请使用$（'＃mycanvas'）。offset（）来获得点击坐标的增量。

Answer 2

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

你写的内容不会使你的画布成为页面的宽度，它会使它宽300像素，高150像素（默认值），然后将其扭曲直到它的页面宽度和高度。

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

如果您希望将其设置为页面大小，则可以选择其他选项，例如将画布放在div中，然后使canvas.width等于div.style.clientWidth。

对于使用不同（全屏或不全屏）窗口大小，请参阅我在这里讨论“模型坐标”的答案：Working with canvas in different screen sizes