手机端刮刮乐的实现
程序员有一种惯性思维，那就是当他们看到可以动的东西(有一些科技含量，哪怕是猫或者狗)的时候，总会先思考一下，这个东西是怎么被代码控制的。比如电梯、路边霓虹灯、遥控器、儿童玩具等。都被程序员“幻想”过。
有时候我觉得程序员可以更透彻地看世界..
大家一定都玩过刮刮乐。这里有一个移动实现的刮刮乐！使用画布
1.使用html 5 canvas global composite operation属性实现刮刮乐
思考：
(1)首先，需要一个盒子来定位和确定划痕区域要放在哪里
(2)定位框中有一个内容框，即奖品框
(3)用帆布盖住盒子
(4)当手触摸并移动时，画布的一部分可以被擦除以暴露奖品区域
(5)当你擦除足够多(3/4)时，可以选择让画布自动消失，慢慢淡出(此效果被选中)
主要是第四步，怎么擦除？
这里选择的是GlobalCompositeOperation，即Canvas中的复合操作。简单来说，Composite就是你画完的图和你画之前的图组合的显示效果。比如在国画中，你先画一笔红色，再画一笔绿色，相交部分是混合色，而在油画中，绿色会覆盖红色的相交部分，在程序绘制中作为复合处理，canvas API中对应的功能是globalCompositeOperation。
globalCompositeOperation中有一个属性值“destination-out”，这意味着当绘画重叠时，显示是透明的。只是我们在这里使用的时候，可以在画布上乱涂乱画，画重叠的地方，就会变得透明，然后露出画布下面是什么，也就是我们想要的效果。
Html代码如下：
！DOCTYPE html html head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1，minimal-scale=1，maximum-scale=1，user-scalable=no '/title/title link rel='样式表' type=' text/CSS ' href=' CSS/guaguaguale . CSS ' rel=' external no follow '/head body！-大背景框-div id=' main '！-定位框-div class='画布框'！-内容框- span id='prize '恭喜，红包/span！-mask canvas-canvas id=' canvas '/canvas/div/div/body script type=' text/JavaScript ' var canvas=document . getelementbyid(' canvas ')；var CTX=canvas . getcontext(' 2d ')；/* canvas offset，使用时会在后面介绍*/var arr=getOffset(canvas)；var oLeft=arr[0]；var OtoP=arr[1]；/*初始化画布*/CTX . BeginPath()；ctx.fillStyle=' # cccctx.fillRect(0，0，canvas.width，canvas . height)；CTX . closepath()；/*添加touch monitor */document . addeventlistener(' touch start '，function () {/*初始化画笔*/CTX . BeginPath()；/*画笔厚度*/CTX . line width=30；/*设置组合效果*/CTX . global composite operation=' destination-out '；/*移动画笔的原点*/CTX。移至(事件。触摸[0]。事件页面。触摸[0]。pagey-otop)；}，false)文档。addeventlistener ('touchmove '，function () {/*根据手指移动画线使其透明*/ctx。lineto(事件。触摸[0]。事件页面。触摸[0]。pagey-otop)；/*填写*/CTX . stroke()；})/*由于event.touches，使用了以下函数getOffset(obj) *。pageX和pageY获取到可视窗口*的距离，而lineTo画笔是根据画布位置*定位的，所以需要先获取画布到可视窗口的距离。然后计算触摸点与画布的距离* *//*得到元素与可视窗口的距离*/函数get offset(obj){ var val ft=0，val top=0；函数get(obj){ valLeft=obj . offsetleft；valTop=obj.offsetTop/*被调用，直到offsetParent为body */if(obj . offset parent . tagname！=' BOdy '){ get(obj . offsetparent)；}返回[valLeft，ValTop]；} return get(obj)；} /script/htmlcss代码如下：
* { margin : 0；padd : 0；} # main { width : 100%；padd : 20px 0；背景-颜色：红色；}.canvasBox { width : 78%；高度： 160 px；border-radius : 10px；背景色： # FFF；保证金-左侧： 11%；线高： 160 px；文本对齐：中心；相对位置：} # canvas { width : 96%；高： 96%；绝对位置：左侧：2%；top : 2%；背景色-:透明；}第五步是获取画布像素(这个注意，像素级操作应该在服务器环境中打开)
Getimagedata (int x，int y，int width，int height):该方法从画布上的(x，y)点获取具有宽度和高度的图片区域的数据。该方法返回一个CanvasPixelArray对象，该对象具有宽度、高度和数据等属性。数据属性是一个数组，数组的每四个元素对应一个像素。
(也可以进行画面的反向操作来改变rgba值)
Getimagedata (int x，int y，int width，int height)返回一个存储像素信息的对象
我们再次打印数据，数据属性为数组，每四个元素对应一个像素(每个像素的信息以rgba的形式保存)。
因此，我们可以根据像素的可选性值来判断像素是透明的还是等于0。
透明像素数量/像素总数=擦除率
Js代码：
document . addeventlistener(' touch end '，function(){/* get imageData object */varimagedate=CTX . getimagedata(0，0，canvas.width，canvas . height)；/* */var allPX=imagedate . width * imagedate . height；var Inum=0；//记录(var I=0；iallPXI){ if(imagedate . data[I * 4 3]==0){ Inum；} } If(inum=all px * 3/4){//消失是用慢慢清除的css3动画效果canvas.setAttribute ('class '，'消失')编写的；}}，false)的css样式。'消失'，css3消失动画。消失{-WebKit-animation : disa 2s 1；animation : disa 2s 1；-web kit-动画-填充-模式：转发；-moz-动画-填充-模式：前进；-o-动画-填充-模式：向前；动画-填充-模式：向前；} @关键帧disa { 0% { opa city 33601；} 100% { opa city 3360 0；}}和网上其他实现相比，这个还是比较简单的，大家互相学习。有没有其他方法可以留言互相学习
以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！
