https://developer.mozilla.org...MutationObserver是一个观察对象，提供给开发者根据DOM树变化时的变化进行逻辑变化。就像三体中的水滴一样，当地球上有大型强子碰撞研究时，会触发一定的逻辑，锁定地球上的科学研究。MutationObserver有3个方法，分别是observe(Nodetarget,optionalMutationObserverInitoptions);disconnect();takeRecords();主要是observe()方法。在实现不可删除水印的过程中，主要有两个逻辑需要处理。第一种是修改水印节点，第二种是删除水印节点。先说第一个，observe(Nodetarget,optionalMutationObserverInitoptions)，它接受两个参数，第一个是目标节点，第二个是目标节点需要监控的属性，包括属性，子节点,甚至可以监控所有的后代节点。drawCanvas(){让divContainer=document.body.appendChild(document.createElement('div'));让waterMarkercanvas=document.createElement('canvas');让context=waterMarkercanvas.getContext('2d');divContainer.appendChild(waterMarkercanvas);divContainer.id='divContainer'letbackgroundUrl=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('图像/png');divContainer.style.backgroundImage=`url(${backgroundUrl})`;上面的代码中，我先画了画布，然后转成png格式的图片，最后设置为div的背景图片，也就是说id为divContainer的div就是我需要监控的dom节点。此时我只需要canvasObserver(){this.drawCanvas();让canvasObserver=newMutationObserver((mo)=>{this.drawCnvas();});让config={属性:true,childList:true,characterData:true};console.logcanvasObserver.observe(document.querySelector('#divContainer'),配置);}可以在用户修改d??ivContainer节点时重绘画布。第二个是因为MutationObserver本身不支持监控节点本身的删除操作。也就是说，如果我删除了divContainer节点，是不可能重新绘制画布的。那么，这个时候就需要一个新的方法，就是监听body节点canvasObserver(){this.drawCanvas();letcanvasObserver=newMutationObserver((mo)=>{console.log(mo.removeNodes)//this.drawCanvas();//console.log('检测画布变化并重绘')});让config={属性:true,childList:true,characterData:true};console.logcanvasObserver.observe(document.querySelector('#divContainer').parentNode,config);}因为在第一段代码中，我们将这个节点设置为body节点的子节点，如果节点发生变化，肯定可以检测到body节点的水滴，重新加载完成绘制。因为在我们的开发中，body节点承载了所有的页面内容，如果body节点被删除，那么水印就没有意义了。这时候如果需要的话，需要一个MutationObserver()中的MutationRecord对象。可以看到MutationObserver()有一个takeRecords函数，记录监控中所有节点的增删改查操作，返回给MutationRecord对象。你可以看到我执行了removeNode操作，它被记录在MutationRecord对象中。canvasObserver(){this.drawCanvas();letcanvasObserver=newMutationObserver((mo)=>{console.log(mo[0].removedNodes)//this.drawCanvas();//console.log('检测画布变化并重绘')});让config={属性:true,childList:true,characterData:true};console.logcanvasObserver.observe(document.querySelector('#divContainer').parentNode,config);}这是修改后的代码，只要一个删除的div与画布的div保持一致，我们就可以进行下一步重绘了。https://github.com/AplloBattl...这是github地址。
