javascript获取手指在画布中的移动坐标
时间: 2024-02-12 16:07:35 浏览: 28
要获取手指在画布中的移动坐标,可以通过记录上一个坐标点的方式来实现。具体代码如下:
```
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = canvas.getBoundingClientRect();
var prevX, prevY;
canvas.addEventListener('touchstart', handleTouchStart, false);
canvas.addEventListener('touchmove', handleTouchMove, false);
function handleTouchStart(event) {
event.preventDefault();
prevX = event.touches[0].clientX - rect.left;
prevY = event.touches[0].clientY - rect.top;
}
function handleTouchMove(event) {
event.preventDefault();
var currX = event.touches[0].clientX - rect.left;
var currY = event.touches[0].clientY - rect.top;
var deltaX = currX - prevX;
var deltaY = currY - prevY;
prevX = currX;
prevY = currY;
console.log('Touch move:', deltaX, deltaY);
}
```
在这个代码中,我们首先通过`event.touches[0].clientX/Y`获取手指在视口中的坐标,并用画布元素的位置信息减去该坐标,得到手指在画布中的坐标。然后,我们计算出当前坐标与上一个坐标之间的偏移量,并将当前坐标作为下一个移动事件的“上一个坐标”。最后,我们将这个偏移量打印出来,可以自行改为其他操作。