坐标缩放画布元素

Question

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

我想用画布元素，它应该适应整个浏览器窗口，像这样以开发HTML5 2D游戏：

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

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

是否有其他单位我可以使用或你会建议我做什么？

Answer 1

集画布width和height属性到游戏区域大小

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

而其样式设置为在屏幕上所需的显示尺寸。

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

现在你可以在代码中总是以为画布是400×300和绘图忽略屏幕上的实际物理像素尺寸时。

您需要缩放鼠标点击以对应游戏坐标上的实际位置。所以如果你在（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