点击查看代码
class WaterMark {
constructor(el, content) {
this.el = el;
this.content = content;
this.observer = null;
this.config = { attributes: true, childList: true, subtree: true };
this.init();
}
init() {
this.createContext(this.el);
}
createContext(elem) {
const { offsetWidth, offsetHeight } = elem;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = offsetWidth;
canvas.height = offsetHeight;
canvas.style.position = "absolute";
canvas.style.pointerEvents = "none";
canvas.style.top = "0px";
canvas.style.left = "0px";
canvas.style.zIndex = "99";
ctx.font = "24px serif";
ctx.rotate((-20 * Math.PI) / 180);
ctx.fillStyle = "rgba(180, 180, 180, 0.6)";
ctx.textAlign = "left";
ctx.textBaseline = "middle";
// 循环在canvas中渲染
for (let i = 0; i < canvas.width / 100; i++) {
for (let j = 0; j < canvas.height / 50; j++) {
ctx.fillText(this.content, i * 200, j * 100 + 20);
}
}
elem.appendChild(canvas);
this.createObserver(elem);
// 添加监听
}
createObserver(elem) {
if (this.observer) this.observer.disconnect();
this.observer = new MutationObserver((changeList, watcher) => {
Array.from(changeList).forEach((record) => {
const { removedNodes } = record;
const removeNodeNames = Array.from(removedNodes).map(
(node) => node.nodeName
);
if (removeNodeNames.includes("CANVAS")) {
window.requestIdleCallback(() => this.createContext(elem), {
timeout: 300,
});
}
});
});
this.observer.observe(elem, this.config);
}
}
const elem = document.getElementById("content");
const waterMark = new WaterMark(elem, "hello, world");