http://www.360us.net/article/9.html
<!DOCTYPE html> <html> <head><title>Touch Test</title></head> <body> <canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> Your browser does not support canvas element. </canvas> <br> <br> Log: <pre id="log" style="border: 1px solid #ccc;"></pre> <script type="text/javascript"> document.body.onload = startup; //文档加载完毕触发 var ongoingTouches = new Array(); //用来保存跟踪正在发送的触摸事件 //设置事件处理程序 function startup() { var el = document.getElementsByTagName("canvas")[0]; el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchcancel", handleCancel, false); el.addEventListener("touchleave", handleEnd, false); el.addEventListener("touchmove", handleMove, false); log("initialized."); } //处理触摸开始事件 function handleStart(evt) { evt.preventDefault(); //阻止事件的默认行为 log("touchstart."); var el = document.getElementsByTagName("canvas")[0]; var ctx = el.getContext("2d"); var touches = evt.changedTouches; for (var i=0; i < touches.length; i++) { log("touchstart:"+i+"..."); ongoingTouches.push(copyTouch(touches[i])); var color = colorForTouch(touches[i]); ctx.beginPath(); ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false); // a circle at the start ctx.fillStyle = color; ctx.fill(); log("touchstart:"+i+"."); } } //处理触摸移动事件 function handleMove(evt) { evt.preventDefault(); var el = document.getElementsByTagName("canvas")[0]; var ctx = el.getContext("2d"); var touches = evt.changedTouches; for (var i=0; i < touches.length; i++) { var color = colorForTouch(touches[i]); var idx = ongoingTouchIndexById(touches[i].identifier); if(idx >= 0) { log("continuing touch "+idx); ctx.beginPath(); log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");"); ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");"); ctx.lineTo(touches[i].pageX, touches[i].pageY); ctx.lineWidth = 4; ctx.strokeStyle = color; ctx.stroke(); ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record log("."); } else { log("can't figure out which touch to continue"); } } } //处理触摸结束事件 function handleEnd(evt) { evt.preventDefault(); log("touchend/touchleave."); var el = document.getElementsByTagName("canvas")[0]; var ctx = el.getContext("2d"); var touches = evt.changedTouches; for (var i=0; i < touches.length; i++) { var color = colorForTouch(touches[i]); var idx = ongoingTouchIndexById(touches[i].identifier); if(idx >= 0) { ctx.lineWidth = 4; ctx.fillStyle = color; ctx.beginPath(); ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY); ctx.lineTo(touches[i].pageX, touches[i].pageY); ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8); // and a square at the end ongoingTouches.splice(idx, 1); // remove it; we're done } else { log("can't figure out which touch to end"); } } } //处理触摸对出事件 function handleCancel(evt) { evt.preventDefault(); log("touchcancel."); var touches = evt.changedTouches; for (var i=0; i < touches.length; i++) { ongoingTouches.splice(i, 1); // remove it; we're done } } //选择颜色 function colorForTouch(touch) { var r = touch.identifier % 16; var g = Math.floor(touch.identifier / 3) % 16; var b = Math.floor(touch.identifier / 7) % 16; r = r.toString(16); // make it a hex digit g = g.toString(16); // make it a hex digit b = b.toString(16); // make it a hex digit var color = "#" + r + g + b; log("color for touch with identifier " + touch.identifier + " = " + color); return color; } //拷贝一个触摸对象 function copyTouch(touch) { return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY }; } //找出正在进行的触摸 function ongoingTouchIndexById(idToFind) { for (var i=0; i < ongoingTouches.length; i++) { var id = ongoingTouches[i].identifier; if (id == idToFind) { return i; } } return -1; // not found } //记录日志 function log(msg) { var p = document.getElementById('log'); p.innerHTML = msg + " " + p.innerHTML; } </script> </body> </html>
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events