嘗試用 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
相對於視窗到位置。