您的位置:首页技术文章
文章详情页

javascript - 用 canvas 实现电子签名,定位鼠标在 canvas 中 坐标

浏览:41日期:2022-12-23 18:34:02

问题描述

尝试用 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 相对于视窗到位置。

标签: JavaScript