HTML5移動端交互——觸摸操作篇

1、html5移動端交互觸摸操作篇在移動設(shè)備中，幾乎全部的操作都和觸摸有關(guān)，而基于這一特性，近年來在移動端中也興起了一些較為特殊的交互方式。用手指在屏幕上刮獎就是其中的一個十分典型的例子，它不僅需要前端設(shè)計師能夠認(rèn)識觸摸手勢的控制辦法，還需要設(shè)計師把握一定的圖像處理技巧。接下來我們就將通過制作一個容易的刮獎案例，來了解html5中觸摸操作的相關(guān)學(xué)問。在移動設(shè)備上，人們的交互方式不再是鍵盤和鼠標(biāo)，而是手指。因此，對應(yīng)的移動端頁面的交互方式也會與桌面端有所不同。在桌面端，為某個提交按鈕制作點擊功能，可以用法如下的javascript代碼：以上代碼用法了onclick大事來對應(yīng)鼠標(biāo)的點擊行為。然而，在i

2、phone這樣的移動端測試時，我們會發(fā)覺onclick大事有大約半秒的延遲，這是由于ios系統(tǒng)需要等待一段時光來推斷用戶是點擊還是拖動。要使得用戶在移動端的交互更為流暢，則需要用法到touch大事，使頁面得知用戶的交互行為不是一次點擊，而是一次觸摸。代碼如下：以上代碼用法了addeventlistener辦法為submit元素注冊了大事偵聽，偵聽的大事為touchstart，觸發(fā)的函數(shù)為submitform()。也就是說，當(dāng)用戶在移動設(shè)備中觸摸這個submit按鈕時，就會觸發(fā)按鈕的touchstart大事，并執(zhí)行submitform函數(shù)。在觸發(fā)touchstart大事時，也會同時產(chǎn)生一個eve

3、nt對象，在這個對象中包括了觸摸行為的各種信息，如我們可以用以下代碼輸出觸摸點的個數(shù)：我們也可以獵取到觸摸點的x、y位置屬性，其屬性名分離為pagex和pagey。以下代碼將輸出第一個觸摸點的x坐標(biāo)：除touchstart外，在html5中與觸摸相關(guān)的大事還包括touchmove和touchend，前者是在手指拖曳頁面元素的過程中不斷觸發(fā)，而后者是手指從一個頁面元素上移開時觸發(fā)。除touch大事外，在ios設(shè)備中還提供了gesture大事，即多指操作?？梢赃@么理解，當(dāng)用戶將一根手指放到按鈕上時，此時觸發(fā)了touch，而此時將其次根手指也放到按鈕上時，就觸發(fā)了gesture（手勢）大事。我們將在

4、隨后的教程中對手勢操作舉行具體講解。在了解了觸摸大事基礎(chǔ)學(xué)問后，接下來，我們將用法touch時光來制作刮獎效果。首先，我們在頁面中創(chuàng)建一個canvas元素，并將其放入一個div容器中，html代碼如下：我們制作了一個名為result.png的文件，預(yù)備將其作為刮獎的結(jié)果，如下圖所示。接下來，用法css樣式為guajiang容器設(shè)置背景（該頁面中其余的、文字的樣式設(shè)置在此省略）。在移動設(shè)備中測試頁面，當(dāng)前的刮獎頁面效果如下圖所示。我們希翼刮獎的結(jié)果默認(rèn)被一個色彩涂層所籠罩，用戶挺直是看不到這一結(jié)果的，惟獨當(dāng)用手指在屏幕中刮一刮以后，才干夠通過擦除涂層看到下方的獎項。這一操作需要在javascri

5、pt中完成，代碼如下：以上代碼通過在canvas中繪制了一塊淺灰色的矩形，使其蓋住了下方背景中的獎項，頁面效果如下圖所示。接下來，我們就需要制作基于觸摸的交互功能，使得用戶手指在移過涂層時，擦除掉相應(yīng)區(qū)域的淺灰色。在此，我們可以運用canvas中一種名為globalcompositeoperation的屬性，通過將其設(shè)置為destination-out，使得在已經(jīng)填充色彩的基礎(chǔ)上再次舉行繪制時，所繪制的區(qū)域變得透亮，從而露出下方的獎項，代碼如下：接下來，我們?yōu)楫嫴紕?chuàng)建touchmove大事偵聽，當(dāng)手指在畫布上移動時，在觸摸的位置繪制相應(yīng)的圓形，該圓形將與已有的填充色相互消減，從而擦去灰色涂層。

6、代碼如下：在以上代碼中，需要注重的是，圓形的繪制坐標(biāo)值應(yīng)當(dāng)是當(dāng)前的觸摸位置對應(yīng)的坐標(biāo)值。但是觸摸點的pagex和pagey屬性返回的是針對囫圇頁面的全局坐標(biāo)，我們需要將上述屬性值減去畫布自身的x和y坐標(biāo)，才干得到畫布中所要繪制的圓形的坐標(biāo)。測試頁面，現(xiàn)在我們就能夠在屏幕上用手指刮獎了?？瓷先ス为勑Ч瓦@樣順當(dāng)?shù)赝瓿闪?。但是設(shè)想一下，在我們實際開發(fā)中，用戶刮獎完畢后基本都將跳轉(zhuǎn)到下一個界面，來提醒領(lǐng)獎的詳細(xì)信息等，而如何推斷用戶是不是已經(jīng)刮獎完畢呢？用戶假如只零星觸摸了一兩下，是不會刮開全部涂層的，也看不到完整的獲獎信息。我們在此做了一個假設(shè)，當(dāng)90%的涂層像素都被抵消掉以后，即90%的面積都被刮開時，用戶才已較為完整地得到了獲獎信息，此時可以推斷刮獎已經(jīng)結(jié)束。代碼如下：現(xiàn)在，再次刷新頁面，當(dāng)我們刮獎到一定程度時，下