HTML 5 Canvas-缩放时获取真实坐标

Question

我最终实现了使用此代码作为基础https://stackoverflow.com/a/3151987/5221943来实现可缩放和平移画布。 现在，我需要检测用户在画布内单击的实际坐标。 考虑到用户已经放大或平移了画布，我不知道如何将鼠标页面坐标转换为现实世界坐标。 有什么建议吗？

Answer 1

这是用于选通画布坐标的代码

 Call the DumpInfo function in the html canvas tag like <canvas id="canvas" width="600" height="200" onmousedown="DumpInfo(event)"></canvas> Bellow two functions defined <script type = "text/javascript" > function DumpInfo(event) { var info = document.getElementById("canvas"); //info.innerHTML += event.type + ", "; var pos = getMousePos(info, event); alert(pos.x); alert(pos.y); } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } </script>