javascript - Verwenden Sie Canvas, um eine elektronische Signatur zu implementieren und die Koordinaten der Maus im Canvas zu positionieren

Question

Beim Versuch, die Leinwand zur Implementierung elektronischer Signaturen zu verwenden, können die Koordinaten der Maus auf der Leinwand nicht genau ermittelt werden.

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;
    };
};

Verwenden Sie ev.clientY 获取了鼠标的坐标，但是 canvas.offsetTop 获取的是 距离父元素的高度。而 canvas in einem Formular mit Bildlaufleisten, sodass es nicht genau positioniert werden kann.

Danke!

Answer 1

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