在移动设备中,几乎所有的操作都和触摸有关,而基于这一特性,近年来在移动端中也兴起了一些较为特别的交互方式。用手指在屏幕上“刮奖”就是其中的一个非常典型的例子,它不仅需要前端设计师能够熟悉触摸手势的控制方法,还需要设计师掌握一定的图像处理技巧。接下来我们就将通过制作一个简单的刮奖案例,来了解HTML5中触摸操作的相关知识。
1. 触摸交互操作基础——Touch与Click的区别
在移动设备上,人们的交互方式不再是键盘和鼠标,而是手指。因此,对应的移动端页面的交互方式也会与桌面端有所不同。
在桌面端,为某个提交按钮制作点击功能,可以使用如下的JavaScript代码:
var submit = document.getElementById("submit"); submit.onclick = function(){ // 功能代码 };
以上代码使用了onclick事件来对应鼠标的点击行为。然而,在iPhone这样的移动端测试时,我们会发现onclick事件有大约半秒的延迟,这是因为iOS系统需要等待一段时间来判断用户是点击还是拖动。要使得用户在移动端的交互更为流畅,则需要使用到Touch事件,使页面得知用户的交互行为不是一次点击,而是一次“触摸”。代码如下:
submit.addEventListener("touchstart", submitForm); function submitForm(){ // 功能代码 }
以上代码使用了addEventListener方法为submit元素注册了事件侦听,侦听的事件为touchstart,触发的函数为submitForm()。也就是说,当用户在移动设备中触摸这个submit按钮时,就会触发按钮的touchstart事件,并执行submitForm函数。
在触发touchstart事件时,也会同时产生一个event对象,在这个对象中包括了触摸行为的各种信息,如我们可以用以下代码输出触摸点的个数:
function submitForm(event){ submit.innerHTML = "触摸点个数为" + event.touches.length; }
我们也可以获取到触摸点的x、y位置属性,其属性名分别为pageX和pageY。以下代码将输出第一个触摸点的x坐标:
function submitForm(event){ submit.innerHTML = "第一个触摸点的X位置" + event.touches[0].pageX; }
除touchstart外,在HTML5中与触摸相关的事件还包括touchmove和touchend,前者是在手指拖曳页面元素的过程中不断触发,而后者是手指从一个页面元素上移开时触发。
除touch事件外,在iOS设备中还提供了gesture事件,即多指操作。可以这么理解,当用户将一根手指放到按钮上时,此时触发了touch,而此时将第二根手指也放到按钮上时,就触发了gesture(手势)事件。我们将在随后的教程中对手势操作进行详细讲解。
在了解了触摸事件基础知识后,接下来,我们将使用touch时间来制作“刮奖”效果。
2. HTML素材准备——准备好HTML代码、必要的CSS样式和素材文件
首先,我们在页面中创建一个Canvas元素,并将其放入一个div容器中
3. 利用触摸事件实现刮奖效果——编写JavaScript代码
我们希望刮奖的结果默认被一个颜色涂层所覆盖,用户直接是看不到这一结果的,只有当用手指在屏幕中“刮一刮”以后,才能够通过擦除涂层看到下方的奖项。这一操作需要在JavaScript中完成,代码如下:
<script type="text/javascript"> var canvas=document.getElementById("mask"); var context=canvas.getContext("2d"); context.fillStyle="#D1D1D1"; //设置填充色为浅灰色 context.fillRect(0,0,240,65); //填充该颜色,以覆盖下方的背景图片 </script>
以上代码通过在Canvas中绘制了一块浅灰色的矩形,使其盖住了下方背景中的奖项图片
接下来,我们就需要制作基于触摸的交互功能,使得用户手指在移过涂层时,擦除掉相应区域的浅灰色。在此,我们可以运用Canvas中一种名为globalCompositeOperation的属性,通过将其设置为destination-out,使得在已经填充颜色的基础上再次进行绘制时,所绘制的区域变得透明,从而露出下方的奖项图片,代码如下:
context.globalCompositeOperation = 'destination-out';
接下来,我们为画布创建touchmove事件侦听,当手指在画布上移动时,在触摸的位置绘制相应的圆形,该圆形将与已有的填充色互相消减,从而擦去灰色涂层。代码如下:
canvas.addEventListener('touchmove', function(event) { //当手指在画布上移动时 event.preventDefault(); //先去除默认的响应行为 var touch = event.touches[0]; //获取触摸的第一个点 context.beginPath(); //开始路径的绘制 context.arc(touch.pageX-canvas.offsetLeft,touch.pageY-canvas.offsetTop,20,0,Math.PI*2); //在所触摸处绘制圆形,半径为20像素 context.closePath(); //结束路径绘制 context.fillStyle="#BDC3C7"; //随意设置一种绘制颜色 context.fill(); //填充该颜色 }); 在以上代码中,需要注意的是,圆形的绘制坐标值应该是当前的触摸位置对应的坐标值。但是触摸点的pageX和pageY属性返回的是针对整个页面的全局坐标,我们需要将上述属性值减去画布自身的x和y坐标,才能得到画布中所要绘制的圆形的坐标。 测试页面,现在我们就能够在屏幕上用手指“刮奖”了。 4. 案例收尾——一些需要考虑的细节 看上去刮奖效果就这样顺利地完成了。但是设想一下,在我们实际开发中,用户刮奖完毕后基本都将跳转到下一个界面,来提示领奖的具体信息等,而如何判断用户是不是已经刮奖完毕呢?用户如果只零星触摸了一两下,是不会刮开所有涂层的,也看不到完整的获奖信息。我们在此做了一个假设,当90%的涂层像素都被抵消掉以后,即90%的面积都被刮开时,用户才已较为完整地得到了获奖信息,此时可以判断刮奖已经结束。代码如下: canvas.addEventListener('touchmove', function(event) { //此前代码省略 var imgData = context.getImageData(0,0,240,65); //获取画布中的所有像素 var pixelsArr = imgData.data; //得到像素的字节数据 var loop = pixelsArr.length; //获取该数据的长度 var transparent = 0; //设置一个变量来记录已经变为透明的像素点的数量 for (var i = 0; i < loop; i += 4) { //循环遍历每一个像素 var alpha = pixelsArr[i + 3]; //获取每个像素的透明度数值 if (alpha < 10) { //当透明度小于10时,认为它已经被擦除 transparent++; //使transparent数值加1 } } var percentage = transparent / (loop / 4); //计算透明像素在所有像素点中所占比例 if(percentage>.9){ //当该比例大于90%时 document.getElementById("status").innerHTML = "刮奖结束!"; //显示刮奖结束字样 } });
现在,再次刷新页面,当我们刮奖到一定程度时,下方就将显示出“刮奖结束”字样。
所有代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale = 1.0"> <title>Touch实践</title> <style type="text/css"> #guajiang{ width:240px; height:65px; background:url(./guajiang.fw.png) no-repeat; background-size: auto 100%; } </style> </head> <body> <div id="guajiang"> <canvas width="240" height="65" id="mask"></canvas> </div> <script type="text/javascript"> var canvas=document.getElementById("mask"); var context=canvas.getContext("2d"); context.fillStyle="#D1D1D1"; //设置填充色为浅灰色 context.fillRect(0,0,240,65); //填充该颜色,以覆盖下方的背景图片 context.globalCompositeOperation = 'destination-out';//再次绘制时所经过区域变透明 canvas.addEventListener('touchmove', function(event) { //当手指在画布上移动时 // event.preventDefault(); //先去除默认的响应行为 var touch = event.touches[0]; //获取触摸的第一个点 context.beginPath(); //开始路径的绘制 context.arc(touch.pageX-canvas.offsetLeft,touch.pageY-canvas.offsetTop,10,0,Math.PI*2); //在所触摸处绘制圆形,半径为20像素 context.closePath(); //结束路径绘制 context.fillStyle="#BDC3C7"; //随意设置一种绘制颜色 context.fill(); //填充该颜色 var imgData = context.getImageData(0,0,240,65); //获取画布中的所有像素 var pixelsArr = imgData.data; //得到像素的字节数据 var loop = pixelsArr.length; //获取该数据的长度 var transparent = 0; //设置一个变量来记录已经变为透明的像素点的数量 for (var i = 0; i < loop; i += 4) { //循环遍历每一个像素 var alpha = pixelsArr[i + 3]; //获取每个像素的透明度数值 if (alpha < 10) { //当透明度小于10时,认为它已经被擦除 transparent++; //使transparent数值加1 } } var percentage = transparent / (loop / 4); //计算透明像素在所有像素点中所占比例 if(percentage>.3){ //当该比例大于90%时 alert("结束") // document.getElementById("status").innerHTML = "刮奖结束!"; //显示刮奖结束字样 } }); </script> </body> </html>
拓展:H5新属性---最高兼容IE9!!!
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,必须使用脚本来绘制图形。
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
默认情况下 <canvas> 元素没有边框和内容
本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完
相关推荐
IOS原生与h5交互之WKwebview详细使用,省去麻烦的操作,调用原生方法使js很简洁化。
中国移动光猫吉比特H5-9获取超级管理员权限教程,亲测可用。测试地区:吉林省。
h5py-2.10.0-cp36-cp36m-linux_aarch64.whl
一个营销h5配置工具,包含滑屏翻页和长页面,定制化页面...h5-generator-master.zip
h5py-2.10.0-cp36-cp36m-win_amd64.whl
h5页面--图形拼接
H5U固件升级包,H5U/H5U-A8/H5U-A16/H5U-A8S
devin_h5手势解锁devin_h5_lock-master.zip
React H5音频播放器 音频播放器组件,可在不同的浏览器上提供一致的UI / UX。...import AudioPlayer from 'react-h5-audio-player' ; import 'react-h5-audio-player/lib/styles.css' ; // import 'react-h
h5视频播放器 h5-plays-rtmp-video-stream
JavaScript客户端签名直传,并返回路径,本文主要介绍如何基于POST Policy的使用规则在客户端通过JavaScript代码完成签名,然后通过表单直传数据到OSS。
手把手教你如何在Kaggle猫狗大战冲到Top2%----model.h5- 手把手教你如何在Kaggle猫狗大战冲到Top2%----model.h5- 手把手教你如何在Kaggle猫狗大战冲到Top2%----model.h5- 手把手教你如何在Kaggle猫狗大战冲到Top2...
android h5 之间交互android h5 之间交互android h5 之间交互android h5 之间交互android h5 之间交互android h5 之间交互
H5游戏---端午节微信小游戏粽子大战,自己通过网络下载的,东西还可以,完整没问题的。
汇川 H5U-通讯-MODBUS元件地址编码和功能码定义
原视频链接:https://www.bilibili.com/video/BV14J4114768。是pink老师分享的课件。有部分没有的内容我在学习的过程中补充在博客专栏中了:...还有部分内容是自己的练习。
士研电机计数器H5C-2/H5C-3/H5C-4说明书pdf,士研电机计数器H5C-2/H5C-3/H5C-4说明书:具有2位数,3位数及4位数计数功能,7段LED数字显示,使用接点输入,亦可外接使用近接开关或光电开关输入,复归方式可用断电复归...
python库,解压后可用。 资源全名:h5py-2.9.0-cp36-cp36m-win_amd64.whl
h5stream-master h5stream-master h5stream-master h5stream-master
h5py-2.10.0-cp37-cp37m-linux_armv7l.whl有时候下载特别慢,可以用这个安装上