[转]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