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);

效果：