摘要：有三個方法，分別是主要說方法，在實現水印不可刪除的過程中主要需要應對的邏輯有兩個，第一種是對水印節點的修改，第二種是對水印節點的刪除。也就是說為的就是我需要監控的節點。

MutationObserver 是一個觀察對象，提供用來當DOM樹發生變化時開發者可以根據發生的變化，進行邏輯的變化。
就像三體中的水滴一樣，當地球上出現大型強子對撞研究時，會觸發一定的邏輯來鎖死地球的科學研究。

observe( Node target, optional MutationObserverInit options );

disconnect();

takeRecords();

主要說observe()方法，在實現水印不可刪除的過程中,主要需要應對的邏輯有兩個，第一種是對水印節點的修改，第二種是對水印節點的刪除。
先說第一種，observe( Node target, optional MutationObserverInit options )，接受兩個參數，第一個是目標節點，第二個是目標節點需要被監控的屬性，包括屬性，子節點，甚至所有后代節點都可以監控。

  drawCanvas() {

        let divContainer = document.body.appendChild(document.createElement("div"));
        let waterMarkercanvas = document.createElement("canvas");
        let context = waterMarkercanvas.getContext("2d");

        divContainer.appendChild(waterMarkercanvas);
        divContainer.id = "divContainer"
        let backgroundUrl = null;

        divContainer.style.height = window.innerHeight + "px";
        divContainer.style.width = window.innerWidth + "px";


        waterMarkercanvas.width = this.option.canvasWidth;
        waterMarkercanvas.height = this.option.canvasHeight;



        context.font =this.option.font;
        context.textAlign = this.option.textAlign;
        context.fillStyle = this.option.textStyle;
        context.translate(waterMarkercanvas.width / 2,waterMarkercanvas.height / 2);
        context.rotate(this.option.degree * Math.PI / 180);
        context.fillText(this.option.text, 0, 0);

        backgroundUrl = waterMarkercanvas.toDataURL("image/png");
        divContainer.style.backgroundImage = `url(${backgroundUrl})`;


    }

在上面的代碼里，我首先canvas畫出來之后，轉為png格式的圖片，最后設置成了div的背景圖片。

也就是說id為divContainer的div就是我需要監控的dom節點。這時我只需要

    canvasObserver() {
        this.drawCanvas();
        let canvasObserver = new MutationObserver((mo) => {
            this.drawCnvas();
        });
        let config = { attributes: true, childList: true, characterData: true };
        console.log

        canvasObserver.observe(document.querySelector("#divContainer"), config);
    }

就可以實現在用戶修改divContainer這個節點是實現canvas的重繪。

第二種，因為MutationObserver本山來講，是不支持監控本本身節點的刪除操作的，也就是說，我如果刪除了divContainer這個節點，是無法實現canvas的重繪的。
那么，這時就需要到一個新的辦法了，那就是監控body節點

    canvasObserver() {
        this.drawCanvas();
        let canvasObserver = new MutationObserver((mo) => {
            console.log(mo.removeNodes)
            // this.drawCanvas();
            // console.log("detect canvas change and redraw")
        });
        let config = { attributes: true, childList: true, characterData: true };
        console.log

        canvasObserver.observe(document.querySelector("#divContainer").parentNode, config);
    }

因為在第一段代碼中，我們把該節點作為了body節點的子節點，如果該節點變化，body節點的水滴肯定可以檢測到，并且完成重繪。因為在我們的開發中，body節點承載著所有的頁面內容，若刪除body節點那么也就沒有水印的意義了。
這時需要一個就需要一個MutationObserver()中的一個MutationRecord對象。

可以看到MutationObserver()有一個takeRecords函數來紀錄監控中所有節點增查刪改的操作，并且返回到MutationRecord對象中。

可以看到我執行了removeNode的操作并且被記錄在了MutationRecord這個對象中。

canvasObserver() {
        this.drawCanvas();
        let canvasObserver = new MutationObserver((mo) => {
            console.log(mo[0].removedNodes)
            // this.drawCanvas();
            // console.log("detect canvas change and redraw")
        });
        let config = { attributes: true, childList: true, characterData: true };
        console.log

        canvasObserver.observe(document.querySelector("#divContainer").parentNode, config);
    }

這是修改后的代碼，我們只要匹配一個被刪除的div和canvas的div是一致的就可以進行下一步的重繪操作了。

https://github.com/AplloBattl...

這是github地址。