缩放的画布元素的坐标

Question

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

我想使用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()来获得点击坐标的增量.