我被要求在使用画布的 html5 制作的游戏中获取鼠标坐标。作为第一个测试,尝试使用以下函数读取鼠标位置。但是这个函数只在考虑画布尺寸的情况下读取鼠标位置。
发生的情况是游戏的舞台比画布更大,并且此功能无法显示角色在舞台上的真实位置。
我正在搜索并注意到画布“后面”存在于已建立像素尺寸的地图(.png)上。画布像相机一样工作,可以看到地图的一部分。
是否可以调整我的函数来读取地图的尺寸,然后定位玩家的实际坐标?
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
canvas.addEventListener("click", function(e) {
var cRect = canvas.getBoundingClientRect();
var scaleX = canvas.width / cRect.width;
var scaleY = canvas.height / cRect.height;
var canvasX = Math.round((e.clientX - cRect.left) * scaleX);
var canvasY = Math.round((e.clientY - cRect.top) * scaleY);
console.log("X: "+canvasX+", Y: "+canvasY);
});
这个函数只会根据画布的大小给我鼠标的位置,但地图更大,我在这里留下一个解释性的图像。
沧海一幻觉
相关分类