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);
    };
};