JS如何实现canvas仿ps橡皮擦刮卡效果

这篇文章主要介绍了js如何实现canvas仿ps橡皮擦刮卡效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

效果演示：

主要JS代码实现

 <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>

感谢你能够认真阅读完这篇文章，希望小编分享的“JS如何实现canvas仿ps橡皮擦刮卡效果”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!