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

【问题标题】：HTML 5 Canvas - Get real coordinate when zoomingHTML 5 Canvas - 缩放时获取真实坐标
【发布时间】：2018-11-19 10:08:51
【问题描述】：

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

【问题讨论】：

标签： javascript html canvas transform zooming

【解决方案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>

【讨论】：