[转]HTML5多点触摸演示源码（Canvas绘制演示）

(2011-05-06 16:44:42)


转载▼

标签： html5 多点触摸 canvas multy touch it

分类： WEB编程

利用HTML5实现多点触摸，在Canvas上实时绘制两点，方便观察多点效果。代码简单易懂，在iPad上运行效果最佳。

两个手指点在屏幕上移动时两个小点会跟随手指移动：




关键代码：
获取控件：
var canvas = document.getElementByIdx_x("canvas");
判断是否支持触摸：

var touchable = 'createTouch' in document;

如果支持就添加事件:

if (touchable) {
canvas.addEventListener('touchstart', onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
canvas.addEventListener('touchend', onTouchEnd, false);
}

function onTouchMove(event) {
//阻止浏览器默认的动作，滑动，缩放等
event.preventDefault();

if (event.touches.length == 1) {
//你可以用event.touches[0].clientX和 event.touches[0].clientY获得坐标
}
else if (event.touches.length == 2) {

//你可以用event.touches[0].clientX和 event.touches[0].clientY获得坐标

//你可以用event.touches[1].clientX和 event.touches[1].clientY获得第二点坐标

}

源码下载地址：http://download.csdn.net/source/3254224