尝试用 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
相对于视窗到位置。