<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head><title>Touch Test</title>
<style type="text/css">
html,body{font-size:14px;width: 100%;margin:0;padding: 0}
pre{width:90%;display:block;margin: 0 auto}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400" 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
console.log(r)
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 + "\n" + p.innerHTML;
}
</script>
</body>
</html>
