問題描述

嘗試用 canvas 實(shí)現(xiàn)電子簽名時(shí)，不能準(zhǔn)確獲取鼠標(biāo)在 canvas 中的坐標(biāo)。

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 獲取了鼠標(biāo)的坐標(biāo)，但是 canvas.offsetTop 獲取的是 距離父元素的高度。而 canvas 在一個(gè)有滾動條的表單中，所以無法準(zhǔn)確定位。

謝謝！

問題解答

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