直播app系统源码，对视频添加擦拭去除效果

直播app系统源码，对视频添加擦拭去除效果实现的相关代码

 <div class="box" id="bb"><br>        <canvas id="cas" width="1366" height="651"></canvas><br>    </div><br> <br>    <script type="text/javascript" charset="utf-8"><br>        var canvas = document.getElementById("cas"),<br>            ctx = canvas.getContext("2d");<br>        var x1, y1, a = 30,<br>            timeout, totimes = 100,<br>            jiange = 30;<br>        canvas.width = document.getElementById("bb").clientWidth;<br>        canvas.height = document.getElementById("bb").clientHeight;<br>        var img = new Image();<br>        img.src = "sha.jpg";<br>        img.onload = function() {<br>            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)<br>            //ctx.fillRect(0,0,canvas.width,canvas)<br>            tapClip()<br>        }<br> <br>        //通过修改globalCompositeOperation来达到擦除的效果<br>        function tapClip() {<br>            var hastouch = "ontouchstart" in window ? true : false,<br>                tapstart = hastouch ? "touchstart" : "mousedown",<br>                tapmove = hastouch ? "touchmove" : "mousemove",<br>                tapend = hastouch ? "touchend" : "mouseup";<br> <br>            ctx.lineCap = "round";<br>            ctx.lineJoin = "round";<br>            ctx.lineWidth = a * 2;<br>            ctx.globalCompositeOperation = "destination-out";<br> <br>            canvas.addEventListener(tapstart, function(e) {<br>                clearTimeout(timeout)<br>                e.preventDefault();<br> <br>                x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft;<br>                y1 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop;<br> <br>                ctx.save();<br>                ctx.beginPath()<br>                ctx.arc(x1, y1, 1, 0, 2 * Math.PI);<br>                ctx.fill();<br>                ctx.restore();<br> <br>                canvas.addEventListener(tapmove, tapmoveHandler);<br>                canvas.addEventListener(tapend, function() {<br>                    canvas.removeEventListener(tapmove, tapmoveHandler);<br> <br>                    timeout = setTimeout(function() {<br>                        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);<br>                        var dd = 0;<br>                        for (var x = 0; x < imgData.width; x += jiange) {<br>                            for (var y = 0; y < imgData.height; y += jiange) {<br>                                var i = (y * imgData.width + x) * 4;<br>                                if (imgData.data[i + 3] > 0) {<br>                                    dd++<br>                                }<br>                            }<br>                        }<br>                        if (dd / (imgData.width * imgData.height / (jiange * jiange)) < 0.4) {<br>                            canvas.className = "noOp";<br>                        }<br>                    }, totimes)<br>                });<br> <br>           <br>                canvas.addEventListener(tapmove, tapmoveHandler);<br>                canvas.addEventListener(tapend, function() {<br>                    canvas.removeEventListener(tapmove, tapmoveHandler);<br> <br>                    timeout = setTimeout(function() {<br>                        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);<br>                        var dd = 0;<br>                        for (var x = 0; x < imgData.width; x += jiange) {<br>                            for (var y = 0; y < imgData.height; y += jiange) {<br>                                var i = (y * imgData.width + x) * 4;<br>                                if (imgData.data[i + 3] > 0) {<br>                                    dd++<br>                                }<br>                            }<br>                        }<br> <br>                    }, totimes)<br> <br>                });<br> <br>            <br>        }<br>    </script><br>    <script type="text/javascript"><br>        window.setTimeout('CountDown()', 100);<br>        // End<br>    </script>