touch.js教程

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