javascript - Gunakan kanvas untuk melaksanakan tandatangan elektronik, letakkan koordinat tetikus dalam kanvas

Question

Apabila cuba menggunakan kanvas untuk melaksanakan tandatangan elektronik, koordinat tetikus dalam kanvas tidak dapat diperoleh dengan tepat.

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

Gunakan ev.clientY 获取了鼠标的坐标，但是 canvas.offsetTop 获取的是 距离父元素的高度。而 canvas dalam bentuk dengan bar skrol, jadi ia tidak boleh diletakkan dengan tepat.

Terima kasih!

Answer 1

Sudah jumpa penyelesaian. Panggil terus canvas.getBoundingClientRect() 可以获取到 canvas untuk kedudukan relatif kepada port pandangan.