在HTML网页开发中，给页面添加水印是保护内容版权的常见需求，手动逐个页面添加水印效率极低，还容易出现遗漏。通过JavaScript结合Canvas技术，可以在页面加载完成后自动生成水印并插入到页面中，实现水印的自动加载效果，整个过程不需要人工干预，适配各类网页场景。
实现原理
水印自动加载的核心逻辑分为三步：首先使用Canvas绘制自定义样式的水印图案，然后将Canvas生成的水印转为base64格式的图片，最后通过CSS将这张水印图片设置为页面的背景，并且设置背景重复平铺，同时保证水印不会干扰页面原有内容的操作。
完整实现代码
下面是完整的HTML和JavaScript代码，直接复制到网页中即可实现水印自动加载：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动加载水印示例</title>
<style>
.watermark-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 保证水印不会拦截鼠标事件 */
z-index: 9999;
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>这是网页正文内容</h1>
<p>页面加载完成后会自动显示水印，不需要手动添加。</p>
<script>
/**
* 生成水印并自动添加到页面
* @param {string} text - 水印文字
* @param {object} options - 水印配置项
*/
function autoLoadWatermark(text, options = {}) {
// 默认配置
const defaultOptions = {
fontSize: 16,
fontFamily: 'Microsoft YaHei',
color: 'rgba(0, 0, 0, 0.1)',
rotate: -20,
width: 200,
height: 150
};
// 合并用户配置和默认配置
const config = { ...defaultOptions, ...options };
// 创建Canvas元素
const canvas = document.createElement('canvas');
canvas.width = config.width;
canvas.height = config.height;
const ctx = canvas.getContext('2d');
// 设置水印样式
ctx.font = `${config.fontSize}px ${config.fontFamily}`;
ctx.fillStyle = config.color;
ctx.rotate(config.rotate * Math.PI / 180);
// 绘制水印文字
ctx.fillText(text, 10, config.height / 2);
// 将Canvas转为base64图片
const watermarkUrl = canvas.toDataURL('image/png');
// 创建水印容器并添加到页面
const watermarkDiv = document.createElement('div');
watermarkDiv.className = 'watermark-container';
watermarkDiv.style.backgroundImage = `url(${watermarkUrl})`;
document.body.appendChild(watermarkDiv);
}
// 页面加载完成后自动调用生成水印
window.addEventListener('load', () => {
// 可以自定义水印文字和配置
autoLoadWatermark('内部资料 禁止外传', {
fontSize: 18,
color: 'rgba(100, 100, 100, 0.15)',
rotate: -25,
width: 220,
height: 180
});
});
</script>
</body>
</html>代码说明
上面的代码主要包含几个核心部分：
autoLoadWatermark函数是核心逻辑，负责接收水印文字和配置参数，生成对应的水印图案。- 通过Canvas的
rotate方法实现水印的旋转效果，让水印更难被去除。 - 给水印容器设置
pointer-events: none，避免水印挡住页面原有的点击、选中操作。 - 在
window的load事件中调用水印生成函数，保证页面所有资源加载完成后再添加水印，避免样式冲突。
自定义配置说明
如果需要调整水印的样式，可以修改调用autoLoadWatermark时传入的配置参数，各参数含义如下：
| 参数名 | 含义 | 默认值 |
|---|---|---|
| fontSize | 水印文字大小，单位为px | 16 |
| fontFamily | 水印文字字体 | Microsoft YaHei |
| color | 水印文字颜色，支持rgba格式设置透明度 | rgba(0, 0, 0, 0.1) |
| rotate | 水印旋转角度，单位为度 | -20 |
| width | 单个水印图案的宽度 | 200 |
| height | 单个水印图案的高度 | 150 |
注意事项
这种水印自动加载的方式属于前端水印，用户可以通过浏览器开发者工具修改样式去除，如果需要更高安全性的水印，可以结合后端生成水印或者添加暗水印技术。另外如果页面有动态添加的内容，不需要额外处理，因为水印是作为背景平铺在整个页面上的，新内容会自动显示在水印上方。
HTMLJavaScript水印自动加载Canvas前端开发修改时间：2026-06-04 18:10:16