canvas 刮奖

//刮奖实例function eraser(){    var canvas=document.querySelector("#canvas");    var w = canvas.parentNode.offsetWidth;    var h = canvas.parentNode.offsetHeight;    canvas.width = w;    canvas.height = h;    var context=canvas.getContext("2d");    var L=0,T=0;    var elem = canvas;    while (elem != null) {      L += elem.offsetLeft;      T += elem.offsetTop;      elem = elem.offsetParent;    };    //画图    reEraser(context);    //设置相交属性    context.globalCompositeOperation = "destination-out";    //擦除开始    canvas.addEventListener("touchstart",_start,false);    function _start(ev){      var _this=this;      var touch=ev.touches[0];      startX=touch.pageX-L;      startY=touch.pageY-T;      var x1=startX;      var y1=startY;      scratch(x1,y1,1);      canvas.addEventListener("touchmove",_move,false);      canvas.addEventListener("touchend",_end,false);      function _move(ev){        var _this=this;        var touch=ev.touches[0];        var moveX = touch.pageX-L;        var moveY = touch.pageY-T;        var x2=moveX;        var y2=moveY;        scratch(x2,y2);      }      function _end(ev){        var N=0;        var imgData=context.getImageData(0,0,canvas.width,canvas.height);        for (var i=3;i<imgData.data.length;i=i+4){          if(imgData.data[i]>0){            N++          }        }        if( N/ (imgData.width*imgData.height) < 0.4 ){ //          //var btnAgain = document.getElementById("js_btn_again");          //btnAgain.className = btnAgain.className.replace(/\bdn\b/,"")          context.clearRect(0,0,canvas.width,canvas.height);        }        this.removeEventListener("touchmove",_move);        this.removeEventListener("touchend",_end);      }    }    function scratch(x, y, fresh) {      if (fresh) {        var r =40;        context.lineWidth = r;        context.lineCap = 'round';        context.lineJoin = 'round';        context.beginPath();        context.moveTo(x, y);      }      context.lineTo(x, y);      context.stroke();    };    function reEraser(context){      context.fillStyle = '#9EA9A3';      context.fillRect(0, 0, w, h);    };};