1.canvas只刮刮乐

来源：互联网发布：unity3d树木高模编辑：程序博客网时间：2024/06/05 21:15

写在前面：

1.并非讲刮刮乐，只是讲刮开的效果实现方法

2.涉及canvas知识点：

A.moveTo(x,y) ，lineTo(x,y) ， lineCap="round"

B.stroke();//描绘

C.获取像素，需要服务器环境才能执行

--------------elem.getImageData(0,0,elem.width,elem.height); 相关文档

D:源文件和目标文件的叠加方式

--------------elem.lobalCompositeOperation 相关文档

效果：

HTML:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=640,user-scalable=no,target-densityDpi=device-dpi">    <title></title>    <style>        *{ margin:0; padding:0;}        #main{ width:640px; height:960px; position:relative; overflow:hidden;}        #c1{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:10;}        #list{}        #list > li{ width:100%; height:100%; position:absolute; left:0; top:0; background-size:cover; display:none; z-index:5;}        #list > li.zIndex{ z-index:6;}        #list > li:nth-of-type(1){ background-image:url(img/b.png); display:block;}        #list > li:nth-of-type(2){ background-image:url(img/c.png);}        #list > li:nth-of-type(3){ background-image:url(img/d.png);}        #list > li:nth-of-type(4){ background-image:url(img/e.png);}        #list > li:nth-of-type(5){ background-image:url(img/ad1.png);}        #list > li:nth-of-type(6){ background-image:url(img/ad2.png);}        #list > li:nth-of-type(7){ background-image:url(img/ad3.png);}        #list > li:nth-of-type(8){ background-image:url(img/ad4.png);}    </style></head><body><div id="main">    <canvas id="c1" width="640" height="980"></canvas>    <ul id="list">        <li></li>    </ul></div><script src="jquery-2.1.3.min.js"></script><!--js代码放这里---></body></html>

JAVASCRIPT:

<script>    $(function(){        var $main = $('#main');        var $list = $('#list');        var $li = $list.find('>li');        var desW = 640;        var desH = 960;        var viewHeight = $(window).height();      slideCanvas();        $main.css('height',viewHeight);        function nowWidth(){ //设置宽度            var w = desW/desH * viewHeight;            return w;        }        $li.css('backgroundPosition',( (desW - nowWidth())/2 )+'px 0');        function slideCanvas(){         var oC=$("#c1").get(0);            var oGc=oC.getContext("2d");            oC.height=viewHeight;            var objImg=new Image();             objImg.src="img/a.png";            var Btn=true;//开关            objImg.onload=function(){                 oGc.drawImage(objImg,(desW - nowWidth())/2 ,0,nowWidth(),viewHeight);                oGc.fillStyle="red";                oGc.globalCompositeOperation="destination-out";                oGc.lineWidth=60;//设置笔画大小                oGc.lineCap="round";//这种尽头是圆角                $(oC).on("touchstart",function(ev){                     var touch=ev.originalEvent.changedTouches[0];                    var x=touch.pageX-$(this).offset().left;                    var y=touch.pageY-$(this).offset().top;                    if(Btn){                        Btn=false;                        oGc.moveTo(x,y);                        oGc.lineTo(x+1,y+1);                    }                    else{                        oGc.lineTo(x+1,y+1);                    }                    oGc.stroke();//描绘                    $(oC).on("touchmove.move",function(ev){                        var touch=ev.originalEvent.changedTouches[0];                        var x=touch.pageX-$(this).offset().left;                        var y=touch.pageY-$(this).offset().top;                        oGc.lineTo(x,y);//连接到当前坐标                        oGc.stroke();//描绘                        fadeOut();//计算透明区域大小，并且在超过1/2的时候移除                        function fadeOut(){                          var dataImg=oGc.getImageData(0,0,oC.width,oC.height);                            var iNum = 0;                            var allPx=dataImg.width*dataImg.height;//获取所有像素数量,返回的是数字                            for(var i=0;i<allPx;i++){                                if(dataImg.data[i*4+3]==0){                                    iNum++;                                }                            }                            if( iNum > allPx/2 ){                                $(oC).animate({opacity:0},1000,function(){                                    $(this).remove();                                });                            }                        }                    });                    $(oC).on("touchend",function(ev){                        $(oC).off(".move");                    })                })            }        }    });</script>

1 0