其實這個問題，一直以來都不是問題，因為以前用canvas做的擦除都是針對手機滿螢幕來擦除，所以一直沒有踩到這個坑~~~

網路上的擦除效果其實寫的都挺泛泛的，沒有特別詳細的，這裡給你們貼一下擦除的原始碼，順便把坑也給你們先預填了，嘿嘿。

這裡面最大的坑就是，如果只是擦除一小部分的時候，你就需要將canvas進行定位移動，但是移動後，canvas裡的畫筆也會進行一起位移。所以在canvas移動後，需要給畫筆重新定位，定回到原點上。重點是三個命令

.save()

.translate()//讓畫筆回原點

.restore()

window.onload=function(){
//下面是刮刮卡的內容
 
var canvas = document.getElementById("myCanvas");
var pmk = $(window).width();
var pmg = $(document).height();

//$('#myCanvas').attr("width",pmk*0.7);
//$('#myCanvas').attr("height","40px");
canvas.width = pmk*0.7;
    canvas.height = 45;

    var cxt = canvas.getContext("2d");


    var img = new Image();

    img
 
.onload = function(){
        cxt.drawImage(img,0,0,canvas.width,canvas.height);

        //cxt.strokeStyle = "rgba(255,255,255,0.1)";
cxt.lineWidth = 20;//線的寬度
cxt.lineCap = "round";//線的兩頭樣式為圓
cxt.lineJoin = "round";//線的拐角樣式為圓
cxt.globalCompositeOperation="destination-out";//變透明
cxt.beginPath();

//       cxt.moveTo(100,100);
 
//       cxt.lineTo(200,200);
//       cxt.lineTo(100,200);
//       cxt.stroke();
cxt.save();
        cxt.translate(-(pmk*0.15),-(pmg*0.373));

        var startX,startY;

        function touchStart(event){
            event.preventDefault();
            if(!event.touches.length) return;
            var touch = event.touches[0];
            startX = touch.pageX;
            startY = touch.pageY;

            cxt.clearRect(startX,startY,50,50);
            //cxt.arc(startX,startY,10,0,Math.PI*2,true);畫空心圓
cxt.stroke();
            cxt.restore();

            //cxt.moveTo(100,100);
            //alert(startX);
//       cxt.beginPath();
//       cxt.clearRect(startX,startY,50,50);
//       cxt.closePath();
//       cxt.fill();
//       cxt.restore();
}

        var closeX,closeY;
        function touchMove(event){
            event.preventDefault();
            var touch = event.touches[0];

            closeX = touch.pageX;
            closeY  = touch.pageY;

            console.log(closeX+","+closeY);

            cxt.lineTo(closeX,closeY);
            cxt.stroke();


        }


        function touchEnd(event){
            event.preventDefault();
            //alert(canvas.width);
data = cxt.getImageData(0,0,canvas.width,canvas.height).data;
            console.log(data);

            for (var i=0,j=0;i<data.length;i+=4){
                if(data[i]&&data[i+1]&&data[i+2]&&data[i+3]){

                    j++;
                }
            }
            //alert(j);
            //alert(canvas.width*canvas.height*0.5);
            //假如j的數量小於等於圖片的0.7了，就全清除
if(j<=canvas.width*canvas.height*0.7){
                cxt.clearRect(0,0,canvas.width,canvas.height);

                //alert("成功");
                //刮刮卡刮完後,可以在這裡寫回調事件
                //刮出終極大獎
                //首先判斷活動是否開啟
if(!getkeyStatus){
                    //活動尚未開啟
$('.fail2,#cover').show();
                    $('.result').text("活動尚未開啟");
                    return false;
                }
                //活動開啟後,判斷使用者的積分是否滿5分
if(tadaynums >= 5){
                    //消除蒙層
$("#myCanvas").hide();
                  

                    //使用者領取成功,將key顯示出來,這裡預設寫了一個key,需要介面提供key
$('.success1,#cover').show();
                    $('.result').text("恭喜你中獎了!");
                   
                }else {
                    $('.fail1,#cover').show();
                }

            }

        }




        //add touch start listener
        //canvas.addEventListener("touchstart",touchStart,false);
canvas.addEventListener("touchmove",touchMove,false);
        canvas.addEventListener("touchend",touchEnd,false);


    };

    img.src= "images/canvaspic.png?version="+new Date();



}