html5控制,html5 触摸控制

Touch Test

Your browser does not support canvas element.

Log:

document.body.οnlοad=startup;//文档加载完毕触发

varongoingTouches= newArray();//用来保存跟踪正在发送的触摸事件

//设置事件处理程序

functionstartup() {varel=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.");

}//处理触摸开始事件

functionhandleStart(evt) {

evt.preventDefault();//阻止事件的默认行为

log("touchstart.");varel=document.getElementsByTagName("canvas")[0];varctx=el.getContext("2d");vartouches=evt.changedTouches;for(vari=0; i

log("touchstart:"+i+"...");

ongoingTouches.push(copyTouch(touches[i]));varcolor=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+".");

}

}//处理触摸移动事件

functionhandleMove(evt) {

evt.preventDefault();varel=document.getElementsByTagName("canvas")[0];varctx=el.getContext("2d");vartouches=evt.changedTouches;for(vari=0; i= 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");

}

}

}//处理触摸结束事件

functionhandleEnd(evt) {

evt.preventDefault();

log("touchend/touchleave.");varel=document.getElementsByTagName("canvas")[0];varctx=el.getContext("2d");vartouches=evt.changedTouches;for(vari=0; i= 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");

}

}

}//处理触摸对出事件

functionhandleCancel(evt) {

evt.preventDefault();

log("touchcancel.");vartouches=evt.changedTouches;for(vari=0; i

ongoingTouches.splice(i,1);//remove it; we're done

}

}//选择颜色

functioncolorForTouch(touch) {varr=touch.identifier% 16;varg=Math.floor(touch.identifier/ 3)% 16;varb=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

varcolor= "#" +r+g+b;

log("color for touch with identifier" +touch.identifier+ "=" +color);returncolor;

}//拷贝一个触摸对象

functioncopyTouch(touch) {return{ identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };

}//找出正在进行的触摸

functionongoingTouchIndexById(idToFind) {for(vari=0; i

}

}return -1;//not found

}//记录日志

functionlog(msg) {varp=document.getElementById('log');

p.innerHTML=msg+ "\n" +p.innerHTML;

}