js生成頁面水印

路：

1. 獲取想要插入水印的文檔節點的頂點坐標值x，y。

2. 獲取文檔節點的高度heigt和寬度width。

3. 用div包裹文字來生成水印。

4. 定義好div的長寬高間距等各種屬性。

5. 定義虛擬節點createDocumentFragment()包裹水印文檔。

6. 先進行行（hang）循環，一行一行生成水印，以x，y為初始坐標，生成一個top為y，left為x，自帶寬高的一列水印。每生成一行，y的值遞增（高度加行距），x的值重置為初始值。

7. 再進行列循環，一列一列生成水印，每生成一列，x的值遞增（寬度加間距）。

8. 通過append方法插入每個水印節點。

9. 將水印append到最開始想要插入的文檔節點中去。

代碼：

function watermark(element, config) {
    // 獲取元素的坐標
    function getOffset(el){
        if (el.offsetParent) {
            return {
                x: el.offsetLeft + getOffset(el.offsetParent).x,
                y: el.offsetTop + getOffset(el.offsetParent).y,
            };
        }
        return {
            x: el.offsetLeft,
            y: el.offsetTop,
        };
    }
    if (!element) return;
    // 默認配置
    const _config = {
        text1: 'text',   //文本1
        text2: 'text',   // 文本2
        start_x: 0,      // x軸起始位置
        start_y: 0,      // y軸起始位置
        space_x: 100,    // x軸間距
        space_y: 50,     // y軸間距
        width: 210,      // 寬度
        height: 80,      // 長度
        fontSize: 20,    // 字體
        color: '#aaa',   // 字色
        alpha: 0.4,      // 透明度
        rotate: 15,       // 傾斜度
    };
    // 替換默認配置
    if(arguments.length === 2 && typeof arguments[1] ==="object" ) {
        const src = arguments[1] || {};
        for(let key in src) {
            if (src[key] && _config[key] && src[key] === _config[key]){
                continue;
            } else if (src[key]){
                _config[key] = src[key];
            }
        }
    }
    // 節點的總寬度
    const total_width = element.scrollWidth;
    // 節點的總高度
    const total_height = element.scrollHeight;
    // 創建文本碎片，用於包含所有的插入節點
    const mark = document.createDocumentFragment();
    // 水印節點的起始坐標
    const position = getOffset(element);
    let x = position.x + _config.start_x, y = position.y + _config.start_y;
    // 先循環y軸插入水印
    do {
        // 再循環x軸插入水印
        do {
            // 創建單個水印節點
            const item =  document.createElement('div');
            item.className = 'watermark-item';
            // 設置節點的樣式
            item.style.position = "absolute";
            item.style.zIndex = 99999;
            item.style.left = `${x}px`;
            item.style.top = `${y}px`;
            item.style.width = `${_config.width}px`;
            item.style.height = `${_config.height}px`;
            item.style.fontSize = `${_config.fontSize}px`;
            item.style.color = _config.color;
            item.style.textAlign = 'center';
            item.style.opacity = _config.alpha;
            item.style.filter = `alpha(opacity=${_config.alpha * 100})`;
            // item.style.filter = `opacity(${_config.alpha * 100}%)`;
            item.style.webkitTransform = `rotate(-${_config.rotate}deg)`;
            item.style.MozTransform = `rotate(-${_config.rotate}deg)`;
            item.style.msTransform = `rotate(-${_config.rotate}deg)`;
            item.style.OTransform = `rotate(-${_config.rotate}deg)`;
            item.style.transform = `rotate(-${_config.rotate}deg)`;
            item.style.pointerEvents = 'none';    //讓水印不遮擋頁面的點擊事件
            // 創建text1水印節點
            const text1 = document.createElement('div');
            text1.appendChild(document.createTextNode(_config.text1));
            item.append(text1);
            // 創建text2水印節點
            const text2 = document.createElement('div');
            text2.appendChild(document.createTextNode(_config.text2));
            item.append(text2);
            // 添加水印節點到文本碎片
            mark.append(item);
            // x坐標遞增
            x = x + _config.width + _config.space_x;
        // 超出文本右側坐標停止插入
        } while (total_width + position.x > x + _config.width);
        // 重置x初始坐標
        x = position.x + _config.start_x;
        // y坐標遞增
        y = y + _config.height + _config.space_y;
    // 超出文本底部坐標停止插入
    } while (total_height + position.y > y + _config.height);
    // 插入文檔碎片
    element.append(mark);
}

使用：

const element = document.getElementById('content');
watermark(element);

 效果：