Detaillierte Erläuterung zur Verwendung von JS, um den Effekt einer PS-Radiergummi-Rubbelkarte auf der Leinwand zu erzielen

 <div Klasse="Box" id="bb">
        <canvas id="cas" width="1366" height="651"></canvas>
    </div>
 
    <script Typ="text/javascript" Zeichensatz="utf-8">
        var canvas = document.getElementById("cas"),
            ctx = canvas.getContext("2d");
        var x1, y1, a = 30,
            Zeitüberschreitung, totimes = 100,
            jiange = 30;
        canvas.width = document.getElementById("bb").clientWidth;
        Leinwand.Höhe = document.getElementById("bb").clientHeight;
        var img = neues Bild();
        img.src = "sha.jpg";
        img.onload = Funktion() {
            ctx.drawImage(img, 0, 0, Leinwandbreite, Leinwandhöhe)
            //ctx.fillRect(0,0,Leinwand.Breite,Leinwand)
            tippen Sie aufClip()
        }
 
        //Erzielen Sie den Löscheffekt durch Ändern der globalCompositeOperation-Funktion tapClip() {
            var hastouch = "ontouchstart" im Fenster? true : false,
                tapstart = hastouch ? "touchstart" : "Maus gedrückt",
                tapmove = hastouch ? "touchmove" : "mousemove",
                tapend = hastouch? "touchend" : "mouseup";
 
            ctx.lineCap = "rund";
            ctx.lineJoin = "runde";
            ctx.Zeilenbreite = a * 2;
            ctx.globalCompositeOperation = "Ziel-Ausgang";
 
            canvas.addEventListener(tapstart, Funktion(e) {
                Zeitüberschreitung löschen (Zeitüberschreitung)
                e.preventDefault();
 
                x1 = hastouch ? e.targetTouches[0].pageX : e.clientX - canvas.offsetLeft;
                y1 = hastouch ? e.targetTouches[0].pageY : e.clientY - canvas.offsetTop;
 
                ctx.speichern();
                ctx.beginPath()
                ctx.arc(x1, y1, 1, 0, 2 * Math.PI);
                ctx.fill();
                ctx.wiederherstellen();
 
                canvas.addEventListener(tapmove, tapmoveHandler);
                canvas.addEventListener(tapend, Funktion() {
                    canvas.removeEventListener(tapmove, tapmoveHandler);
 
                    Zeitüberschreitung = Zeitüberschreitung festlegen (Funktion () {
                        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                        var dd = 0;
                        für (var x = 0; x < imgData.width; x += jiange) {
                            für (var y = 0; y < imgData.height; y += jiange) {
                                var i = (y * imgData.width + x) * 4;
                                wenn (imgData.data[i + 3] > 0) {
                                    dd++
                                }
                            }
                        }
                        wenn (dd / (imgData.width * imgData.height / (jiange * jiange)) < 0,4) {
                            canvas.className = "noOp";
                        }
                    }, zumal)
                });
 
           
                canvas.addEventListener(tapmove, tapmoveHandler);
                canvas.addEventListener(tapend, Funktion() {
                    canvas.removeEventListener(tapmove, tapmoveHandler);
 
                    Zeitüberschreitung = Zeitüberschreitung festlegen (Funktion () {
                        var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                        var dd = 0;
                        für (var x = 0; x < imgData.width; x += jiange) {
                            für (var y = 0; y < imgData.height; y += jiange) {
                                var i = (y * imgData.width + x) * 4;
                                wenn (imgData.data[i + 3] > 0) {
                                    dd++
                                }
                            }
                        }
 
                    }, zumal)
 
                });
 
            
        }
    </Skript>
    <Skripttyp="text/javascript">
        window.setTimeout('CountDown()', 100);
        // Ende
    </Skript>