HTML5移动端交互——触摸操作篇

1、html5移动端交互触摸操作篇在移动设备中，几乎全部的操作都和触摸有关，而基于这一特性，近年来在移动端中也兴起了一些较为特殊的交互方式。用手指在屏幕上刮奖就是其中的一个十分典型的例子，它不仅需要前端设计师能够认识触摸手势的控制办法，还需要设计师把握一定的图像处理技巧。接下来我们就将通过制作一个容易的刮奖案例，来了解html5中触摸操作的相关学问。在移动设备上，人们的交互方式不再是键盘和鼠标，而是手指。因此，对应的移动端页面的交互方式也会与桌面端有所不同。在桌面端，为某个提交按钮制作点击功能，可以用法如下的javascript代码：以上代码用法了onclick大事来对应鼠标的点击行为。然而，在i

2、phone这样的移动端测试时，我们会发觉onclick大事有大约半秒的延迟，这是由于ios系统需要等待一段时光来推断用户是点击还是拖动。要使得用户在移动端的交互更为流畅，则需要用法到touch大事，使页面得知用户的交互行为不是一次点击，而是一次触摸。代码如下：以上代码用法了addeventlistener办法为submit元素注册了大事侦听，侦听的大事为touchstart，触发的函数为submitform()。也就是说，当用户在移动设备中触摸这个submit按钮时，就会触发按钮的touchstart大事，并执行submitform函数。在触发touchstart大事时，也会同时产生一个eve

3、nt对象，在这个对象中包括了触摸行为的各种信息，如我们可以用以下代码输出触摸点的个数：我们也可以猎取到触摸点的x、y位置属性，其属性名分离为pagex和pagey。以下代码将输出第一个触摸点的x坐标：除touchstart外，在html5中与触摸相关的大事还包括touchmove和touchend，前者是在手指拖曳页面元素的过程中不断触发，而后者是手指从一个页面元素上移开时触发。除touch大事外，在ios设备中还提供了gesture大事，即多指操作。可以这么理解，当用户将一根手指放到按钮上时，此时触发了touch，而此时将其次根手指也放到按钮上时，就触发了gesture（手势）大事。我们将在

4、随后的教程中对手势操作举行具体讲解。在了解了触摸大事基础学问后，接下来，我们将用法touch时光来制作刮奖效果。首先，我们在页面中创建一个canvas元素，并将其放入一个div容器中，html代码如下：我们制作了一个名为result.png的文件，预备将其作为刮奖的结果，如下图所示。接下来，用法css样式为guajiang容器设置背景（该页面中其余的、文字的样式设置在此省略）。在移动设备中测试页面，当前的刮奖页面效果如下图所示。我们希翼刮奖的结果默认被一个色彩涂层所笼罩，用户挺直是看不到这一结果的，惟独当用手指在屏幕中刮一刮以后，才干够通过擦除涂层看到下方的奖项。这一操作需要在javascri

5、pt中完成，代码如下：以上代码通过在canvas中绘制了一块浅灰色的矩形，使其盖住了下方背景中的奖项，页面效果如下图所示。接下来，我们就需要制作基于触摸的交互功能，使得用户手指在移过涂层时，擦除掉相应区域的浅灰色。在此，我们可以运用canvas中一种名为globalcompositeoperation的属性，通过将其设置为destination-out，使得在已经填充色彩的基础上再次举行绘制时，所绘制的区域变得透亮，从而露出下方的奖项，代码如下：接下来，我们为画布创建touchmove大事侦听，当手指在画布上移动时，在触摸的位置绘制相应的圆形，该圆形将与已有的填充色相互消减，从而擦去灰色涂层。

6、代码如下：在以上代码中，需要注重的是，圆形的绘制坐标值应当是当前的触摸位置对应的坐标值。但是触摸点的pagex和pagey属性返回的是针对囫囵页面的全局坐标，我们需要将上述属性值减去画布自身的x和y坐标，才干得到画布中所要绘制的圆形的坐标。测试页面，现在我们就能够在屏幕上用手指刮奖了。看上去刮奖效果就这样顺当地完成了。但是设想一下，在我们实际开发中，用户刮奖完毕后基本都将跳转到下一个界面，来提醒领奖的详细信息等，而如何推断用户是不是已经刮奖完毕呢？用户假如只零星触摸了一两下，是不会刮开全部涂层的，也看不到完整的获奖信息。我们在此做了一个假设，当90%的涂层像素都被抵消掉以后，即90%的面积都被刮开时，用户才已较为完整地得到了获奖信息，此时可以推断刮奖已经结束。代码如下：现在，再次刷新页面，当我们刮奖到一定程度时，下