Javascript 缩放画布元素的坐标

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

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

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

很遗憾，您的浏览器不支持。。。

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

---

还有其他单位可以使用吗？或者你建议我怎么做？

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

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

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

---

您需要缩放鼠标单击以对应游戏坐标上的实际位置。所以，如果你在画布上（x，y）点击鼠标，你会得到游戏坐标上的位置x=（x/$（“#mycanvas”）.width（）*400和y。如果画布不是全屏的，请使用$（“#mycanvas”）.offset（）获取单击坐标的增量。

永远不要对画布使用CSS大小调整，它们会让事情变得非常难看

您编写的内容不会使画布成为页面的宽度，而是使其宽300像素，高150像素（默认设置），然后将其扭曲，直到达到页面的宽度和高度

坚持画布的宽度和高度属性，而不是使用CSS

如果要使其成为页面的大小，可以使用其他选项，例如将画布放入div中，然后使

canvas.width

等于

div.style.clientWidth

---

对于使用不同（全屏或非全屏）窗口大小的问题，请参见我在此处谈论“模型坐标”的回答：

这太合乎逻辑了。。我现在觉得自己很傻；）谢谢你的帮助！！！对于几乎所有的HTML元素都是如此……但对于。通常HTML规范和CSS尝试做相同的事情，而指定两者（特别是不同的）会造成混乱。但是HTML的宽度/高度和CSS的宽度/高度做了不同的事情，通常你都需要它们。在这种情况下，推广CSS最佳实践通常是行不通的。

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