如何在在线聊天的 javascript 2D canvas 上获得相对鼠标位置,人们可以通过单击移动他们的角色

How to have relative mouse position on javascript 2D canvas of online chat where people can move their character with click

我正在创建一个 2D 环境,其行为类似于聊天,但具有可以在 canvas 中移动的化身。 用户可以在屏幕上点击他们想要移动的 x 轴来移动他们的角色。 我的问题是客户端获取并发送到服务器的鼠标位置对于每个用户来说都不相同(因为 window 大小不同),所以当服务器向每个人发送新位置(以像素为单位)时,不是相对的每个人屏幕的大小,因为宽度为 1080 像素的用户屏幕中的 100 像素与屏幕较小(例如 200 像素)的用户屏幕不同。 我怎样才能获得相对于 canvas 大小的鼠标位置,以便每个用户都在 canvas 的相对位置上绘制每个人?

如果您发送的鼠标位置不是绝对值,而是 canvas 宽度和高度内的偏移百分比 - 那么每个站点都可以计算出放置头像的位置,因为它知道实际尺寸canvas 用于其站点。