实现多点触控的js代码
时间: 2024-05-05 21:21:37 浏览: 4
以下是一个简单的多点触控的JavaScript代码示例:
```
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var touchX = [];
var touchY = [];
canvas.addEventListener("touchstart", function(event) {
event.preventDefault();
touchX = [];
touchY = [];
for (var i = 0; i < event.touches.length; i++) {
touchX.push(event.touches[i].pageX - canvas.offsetLeft);
touchY.push(event.touches[i].pageY - canvas.offsetTop);
}
});
canvas.addEventListener("touchmove", function(event) {
event.preventDefault();
touchX = [];
touchY = [];
for (var i = 0; i < event.touches.length; i++) {
touchX.push(event.touches[i].pageX - canvas.offsetLeft);
touchY.push(event.touches[i].pageY - canvas.offsetTop);
}
draw();
});
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < touchX.length; i++) {
ctx.beginPath();
ctx.arc(touchX[i], touchY[i], 10, 0, 2 * Math.PI);
ctx.fill();
}
}
```
这段代码会在canvas元素上监听touchstart和touchmove事件。在touchstart事件中,它会记录下每个触点的坐标,并保存在touchX和touchY数组中。在touchmove事件中,它会更新touchX和touchY数组,并调用draw函数来重新绘制画布。
draw函数会首先清空画布,然后绘制所有触点的圆形。你可以根据需要修改绘制的形状和样式。