javascript - 用 canvas 实现电子签名,定位鼠标在 canvas 中 坐标
巴扎黑
巴扎黑 2017-05-16 13:36:00
0
1
610

尝试用 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 在一个有滚动条的表单中,所以无法准确定位。

谢谢!

巴扎黑
巴扎黑

全部回复(1)
巴扎黑

已经找到解决方法了。直接调用 canvas.getBoundingClientRect() 可以获取到 canvas 相对于视窗到位置。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板