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

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

标签：

分类： 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获得第二点坐标

}