给某个元素上添加水印，通常用于防止内容被未经授权的复制。它通过在目标区域上绘制半透明的文本或图像来实现这一功能。

关键步骤
1.初始化和配置：
•组件接受一系列配置参数，如水印文本、字体、颜色、旋转角度等。
•这些参数用于控制水印的外观和位置。

2.Canvas绘图：
•创建一个隐藏的<canvas>元素。
•使用Canvas API绘制水印图案，根据配置参数设置文本内容、字体样式、颜色、透明度和旋转角度。
•将绘制好的图案转换为Data URL格式的图像。

3.应用水印：
•将生成的Data URL图像作为背景图像应用到目标区域。
•使用CSS设置背景图像的位置、重复方式和透明度，以确保水印覆盖整个目标区域。

核心代码示例
以下是一个代码示例：

function createWatermark ({text = '水印', fontSize = 16, color = 'rgba(0, 0, 0, 0.1)', rotate = -30}) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = 200;
    const height = 200;

    canvas.width = width;
    canvas.height = height;

    ctx.clearRect(0, 0, width, height);
    ctx.font = `${fontSize}px Arial`;
    ctx.fillStyle = color;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.translate(width / 2, height / 2);
    ctx.rotate((Math.PI / 180) * rotate);
    ctx.fillText(text, 0, 0);

    const dataUrl = canvas.toDataURL('image/png');
    return dataUrl
}

function setStyle(watermarkElement) {
  watermarkElement.style.backgroundImage = `url(${dataUrl})`;
  watermarkElement.style.backgroundRepeat = 'repeat';
  watermarkElement.style.width = '100vw';
  watermarkElement.style.height = '100vh';
  watermarkElement.style.position = 'absolute';
  watermarkElement.style.top = 0;
  watermarkElement.style.pointerEvents = 'none'
  watermarkElement.style.visibility = 'visible'
  watermarkElement.style.opacity = 1
}
const watermarkElement = document.createElement('div');
setStyle(watermarkElement)
document.body.appendChild(watermarkElement);

在实现防篡改的水印组件时，可以使用 MutationObserver 监控 DOM 变化：

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        if (mutation.type === 'childList' && !document.contains(watermarkElement)) {
            document.body.appendChild(watermarkElement); // 重新添加水印
        }
        if (mutation.type === 'attributes' && mutation.target === watermarkElement) {
            // 恢复水印属性
            setStyle(watermarkElement)
        }
    });
});

observer.observe(document.body, {
    childList: true,
    attributes: true,
    subtree: true,
});

MutationObserver 可以监控 DOM 树的变化，包括节点的添加、删除和属性的变化。当检测到水印元素被修改或删除时，可以立即恢复或重新添加水印。