如何使用JavaScript创建一个动态水印功能。通过创建一个watermark.js文件，定义了添加和移除水印的方法。在页面的mounted阶段添加水印，destroyed阶段移除，确保水印只在特定页面存在且不影响其他页面。代码中设置了水印的字体、颜色、位置和透明度，并使用canvas将水印内容渲染到页面背景上。

项目中需要个打印页面的功能 ，页面中需要水印

效果实现：

效果图.png

代码实现：

1.创建文件 watermark.js文件

注：可以自己设置属性

/**  水印添加方法  */
const setWatermark = (str1, str2) => {
    const id = "1.23456789.23456789";

    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
    }

    const can = document.createElement("canvas");
    // 设置canvas画布大小
    can.width = 350;
    can.height = 280;

    const cans = can.getContext("2d");
    cans.rotate((-20 * Math.PI) / 180); // 水印旋转角度
    cans.font = "30px Vedana"; // 水印的字体大小
    cans.fillStyle = "#797979"; //水印的字体颜色
    cans.textAlign = "center"; // 水印的位置
    cans.textBaseline = "Middle";
    cans.fillText(str1, can.width / 2, can.height); // 水印在画布的位置x，y轴
    cans.fillText(str2, can.width / 2, can.height + 22);

    const div = document.createElement("div");
    div.id = id;
    div.style.pointerEvents = "none";
    div.style.top = "10px";
    div.style.left = "0px";
    div.style.opacity = "0.15";
    div.style.position = "fixed";
    div.style.zIndex = "100000";
    div.style.width = document.documentElement.clientWidth + "px";
    div.style.height = document.documentElement.clientHeight + "px";
    div.style.background = "url(" + can.toDataURL("image/png") + ") left top repeat";
    document.body.appendChild(div);
    return id;
}

// 添加水印方法
export const setWaterMark = (str1, str2) => {
    let id = setWatermark(str1, str2);
    if (document.getElementById(id) === null) {
        id = setWatermark(str1, str2);
    }
}

// 移除水印方法
export const removeWatermark = () => {
    const id = "1.23456789.23456789";
    if (document.getElementById(id) !== null) {
        document.body.removeChild(document.getElementById(id));
    }
}

2.哪一个页面需要水印。则引入这个文件

import { removeWatermark, setWaterMark } from "./watermark";

3.设置水印内容，以及清除水印
注：如果不清除，则退出这个页面之后，其他页面也会受到水印的影响

mounted() {
    setWaterMark('', '水印内容');
},
destroyed() {
    removeWatermark();
}