四川盐亭网站制作公司

js+html5如何实现移动端刮刮乐

小编给大家分享一下js+html5如何实现移动端刮刮乐，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 创新互联是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于成都网站设计、做网站、软件开发、设计服务业务。我们始终坚持以客户需求为导向，结合用户体验与视觉传达，提供有针对性的项目解决方案，提供专业性的建议，创新互联建站将不断地超越自我，追逐市场，引领市场！

1、用HTML 5 canvas globalCompositeOperation 属性实现刮刮乐

思路：

（1）首先需要一个盒子定位，确定刮刮乐区域想要放在哪里

（2）定位盒子里有个放内容的盒子，也就是放奖品的

（3）用一个画布(canvas)把上面的盒子盖住

（4）当手触摸移动的时候，可以擦除部分画布，露出奖品区

（5）当擦除足够多(3/4)的时候，可以选择让画布自动消失，慢慢淡出（这个效果选做）

主要是第四步，如何擦除？

这里选用 globalCompositeOperation，即Canvas中的合成操作。简单来说,Composite(组合),就是对你在绘图中,后绘制的图形与先绘制的图形之间的组合显示效果,比如在国画中,你先画一笔红色,再来一笔绿色,相交的部分是一种混色,而在油画中,绿色就会覆盖掉相交部分的红色,这在程序绘图中的处理就是Composite,Canvas API中对应的函数就是globalCompositeOperation。

globalCompositeOperation中有个属性值是“destination-out"，也就是当绘画重叠时显示透明。刚好用到这里，我们就可以在画布上乱画，画过的地方就是重叠的地方，就会变成透明，然后露出画布下的东西，也就是我们想要的效果。

html 代码如下：



 
 
 
 
 
 
 
 
 
  
  
  
  
   恭喜发财，红包拿来
  
  
  
  
 
     var canvas = document.getElementById("canvas");  var ctx = canvas.getContext('2d');  /* 画布偏移量，下面用到的时候再介绍*/  var arr = getOffset(canvas);  var oLeft = arr[0];  var oTop = arr[1];  /* 初始化画布*/  ctx.beginPath();  ctx.fillStyle = '#ccc';  ctx.fillRect(0,0,canvas.width,canvas.height);  ctx.closePath();  /* 增加触摸监听*/  document.addEventListener("touchstart",function(){   /* 初始化画笔*/   ctx.beginPath();   /* 画笔粗细*/   ctx.lineWidth = 30;   /* 设置组合效果*/   ctx.globalCompositeOperation = 'destination-out';   /* 移动画笔原点*/   ctx.moveTo(event.touches[0].pageX-oLeft,event.touches[0].pageY-oTop);  },false)  document.addEventListener("touchmove",function(){   /* 根据手指移动画线，使之变透明*/   ctx.lineTo(event.touches[0].pageX-oLeft,event.touches[0].pageY-oTop);   /* 填充*/   ctx.stroke();  })  /* 之所以会用到下面的那个函数getOffset（obj）   * 是因为event.touches[0].pageX、pageY获取的是相对于可视窗口的距离   * 而lineTo画笔的定位是根据画布位置定位的   * 所以就要先获取到画布(canvas)相对于可视窗口的距离，然后计算得出触摸点相对于画布的距离    * */  /* 获取该元素到可视窗口的距离*/  function getOffset(obj){   var valLeft = 0,valTop = 0;   function get(obj){   valLeft += obj.offsetLeft;   valTop += obj.offsetTop;   /* 不到最外层就一直调用，直到offsetParent为body*/   if (obj.offsetParent.tagName!='BODY') {    get(obj.offsetParent);   }   return [valLeft,valTop];   }   return get(obj);  }  

css代码如下：

*{
 margin: 0;
 padding: 0;
}
#main{
 width: 100%;
 padding: 20px 0;
 background-color: red;
}

.canvasBox{
 width: 78%;
 height: 160px;
 border-radius: 10px;
 background-color: #FFF;
 margin-left: 11%;
 line-height: 160px;
 text-align: center;
 position: relative;
}
#canvas{
 width: 96%;
 height: 96%;
 position: absolute;
 left: 2%;
 top: 2%;
 background-color: transparent;
}

第五步要用到canvas像素点的获取(这块注意，像素级操作，要在服务器环境下打开)

getImageData(int x,int y,int width,int height)：该方法获取canvas上从(x,y)点开始，宽为width、高为height的图片区域的数据，该方法返回的是一个CanvasPixelArray对象，该对象具有width、height、data等属性。data属性为一个数组，该数组每4个元素对应一个像素点。

(对图片的反相操作也可以这样做，改变rgba值)

getImageData(int x,int y,int width,int height)返回的对象，data里面存储的是像素点信息

js+html5如何实现移动端刮刮乐

我们再打印data,data属性为一个数组，每4个元素对应一个像素点（以rgba的形式保存每一个像素点的信息）。

js+html5如何实现移动端刮刮乐

所以我们就可以根据像素点的opcity值来判断这个像素点是不是透明，是不是等于0？

透明的像素点数量/总像素点数量 = 擦除比例

js代码：

document.addEventListener("touchend",function(){
  /* 获取imageData对象*/
  var imageDate = ctx.getImageData(0,0,canvas.width,canvas.height);
  /* */
  var allPX = imageDate.width * imageDate.height;
  
  var iNum = 0;//记录刮开的像素点个数
  
  for(var i=0;i= allPX*3/4){
  // disappear里面写了缓慢清除的css3动画效果
  canvas.setAttribute('class','disappear'); 
  }
 },false)

" .disappear " 的css样式，css3消失动画

.disappear{
 -webkit-animation: disa 2s 1;
 animation: disa 2s 1;
 -webkit-animation-fill-mode: forwards;
 -moz-animation-fill-mode: forwards;
 -o-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
@keyframes disa{
 0%{opacity:1;}
 100%{opacity: 0;}
}

以上是“js+html5如何实现移动端刮刮乐”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


文章名称：js+html5如何实现移动端刮刮乐
文章路径：http://scyanting.com/article/jsshdi.html

其他资讯