問題描述

嘗試用 canvas 實現電子簽名時，不能準確獲取鼠標在 canvas 中的坐標。

let canvas = document.getElementById('canvas');let cxt = canvas.getContext(’2d’);canvas.onmousedown = function(ev){ var ev = ev || window.event; cxt.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop); document.onmousemove = function(ev){ var ev = ev || window.event; cxt.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop); cxt.stroke(); }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; };};

用 ev.clientY 獲取了鼠標的坐標，但是 canvas.offsetTop 獲取的是 距離父元素的高度。而 canvas 在一個有滾動條的表單中，所以無法準確定位。

謝謝！

問題解答

已經找到解決方法了。直接調用 canvas.getBoundingClientRect() 可以獲取到 canvas 相對于視窗到位置。