HTML+CSS+JS实现canvas仿ps橡皮擦刮卡效果

谁践踏了优雅 2023-10-02 12:20 7阅读 0赞

效果演示：**文末获取源码**

![20210916151641670.gif][]

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

## 源码获取 ##

大家**点赞、收藏、关注、评论**我啦 、**查看下方微信公众号获取**~！

[20210916151641670.gif]: https://img-blog.csdnimg.cn/20210916151641670.gif