javascript - 用 canvas 實作電子簽名,定位滑鼠在 canvas 中 座標
巴扎黑
巴扎黑 2017-05-16 13:36:00
0
1
607

嘗試用 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 相對於視窗到位置。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板