javascript - Utiliser Canvas pour implémenter une signature électronique, positionner les coordonnées de la souris dans le Canvas

Question

Lorsque vous essayez d'utiliser le canevas pour mettre en œuvre une signature électronique, les coordonnées de la souris dans le canevas ne peuvent pas être obtenues avec précision.

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

Utilisez ev.clientY 获取了鼠标的坐标，但是 canvas.offsetTop 获取的是 距离父元素的高度。而 canvas dans un formulaire avec des barres de défilement, afin qu'il ne puisse pas être positionné avec précision.

Merci !

Answer 1

J'ai déjà trouvé une solution. Appelez directement canvas.getBoundingClientRect() 可以获取到 canvas pour vous positionner par rapport à la fenêtre.