JS实现canvas仿ps橡皮擦刮卡效果详解

 <div class="box" id="bb">
        <canvas id="cas" width="1366" height="651"></canvas>
    </div>
 
    <script type="text/javascript" charset="utf-8">
        var canvas = document.getelementbyid("cas"),
            ctx = canvas.getcontext("2d");
        var x1, y1, a = 30,
            timeout, totimes = 100,
            jiange = 30;
        canvas.width = document.getelementbyid("bb").clientwidth;
        canvas.height = document.getelementbyid("bb").clientheight;
        var img = new image();
        img.src = "sha.jpg";
        img.onload = function() {
            ctx.drawimage(img, 0, 0, canvas.width, canvas.height)
            //ctx.fillrect(0,0,canvas.width,canvas)
            tapclip()
        }
 
        //通过修改globalcompositeoperation来达到擦除的效果
        function tapclip() {
            var hastouch = "ontouchstart" in window ? true : false,
                tapstart = hastouch ? "touchstart" : "mousedown",
                tapmove = hastouch ? "touchmove" : "mousemove",
                tapend = hastouch ? "touchend" : "mouseup";
 
            ctx.linecap = "round";
            ctx.linejoin = "round";
            ctx.linewidth = a * 2;
            ctx.globalcompositeoperation = "destination-out";
 
            canvas.addeventlistener(tapstart, function(e) {
                cleartimeout(timeout)
                e.preventdefault();
 
                x1 = hastouch ? e.targettouches[0].pagex : e.clientx - canvas.offsetleft;
                y1 = hastouch ? e.targettouches[0].pagey : e.clienty - canvas.offsettop;
 
                ctx.save();
                ctx.beginpath()
                ctx.arc(x1, y1, 1, 0, 2 * math.pi);
                ctx.fill();
                ctx.restore();
 
                canvas.addeventlistener(tapmove, tapmovehandler);
                canvas.addeventlistener(tapend, function() {
                    canvas.removeeventlistener(tapmove, tapmovehandler);
 
                    timeout = settimeout(function() {
                        var imgdata = ctx.getimagedata(0, 0, canvas.width, canvas.height);
                        var dd = 0;
                        for (var x = 0; x < imgdata.width; x += jiange) {
                            for (var y = 0; y < imgdata.height; y += jiange) {
                                var i = (y * imgdata.width + x) * 4;
                                if (imgdata.data[i + 3] > 0) {
                                    dd++
                                }
                            }
                        }
                        if (dd / (imgdata.width * imgdata.height / (jiange * jiange)) < 0.4) {
                            canvas.classname = "noop";
                        }
                    }, totimes)
                });
 
           
                canvas.addeventlistener(tapmove, tapmovehandler);
                canvas.addeventlistener(tapend, function() {
                    canvas.removeeventlistener(tapmove, tapmovehandler);
 
                    timeout = settimeout(function() {
                        var imgdata = ctx.getimagedata(0, 0, canvas.width, canvas.height);
                        var dd = 0;
                        for (var x = 0; x < imgdata.width; x += jiange) {
                            for (var y = 0; y < imgdata.height; y += jiange) {
                                var i = (y * imgdata.width + x) * 4;
                                if (imgdata.data[i + 3] > 0) {
                                    dd++
                                }
                            }
                        }
 
                    }, totimes)
 
                });
 
            
        }
    </script>
    <script type="text/javascript">
        window.settimeout('countdown()', 100);
        // end
    </script>