在HTML页面开发过程中，添加水印是一种常见的需求，尤其是倾斜的水印既能起到标识作用，又不会过度遮挡页面核心内容。设置水印旋转角度可以通过不同的技术方案实现，下面分别介绍两种常用的实现方式。
一、CSS transform实现DOM水印旋转
这种方式通过创建DOM元素作为水印载体，利用CSS的transform属性设置旋转角度，实现简单且兼容性好，适合静态水印场景。
实现步骤
- 创建水印容器，设置固定定位覆盖整个页面
- 在容器内创建多个水印文本元素，设置统一的旋转角度
- 通过
transform: rotate()属性调整旋转角度，数值单位为deg
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS水印旋转示例</title>
<style>
.watermark-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
.watermark-item {
position: absolute;
font-size: 20px;
color: rgba(0, 0, 0, 0.1);
/* 设置旋转角度为-30度，可根据需求调整数值 */
transform: rotate(-30deg);
white-space: nowrap;
user-select: none;
}
</style>
</head>
<body>
<div class="content">
<h1>页面主要内容</h1>
<p>这里是页面的核心业务内容，水印不会干扰用户的正常操作。</p>
</div>
<div class="watermark-container" id="watermarkContainer"></div>
<script>
// 水印文本内容
const watermarkText = "内部资料";
// 水印水平间距
const horizontalGap = 200;
// 水印垂直间距
const verticalGap = 150;
// 获取容器
const container = document.getElementById("watermarkContainer");
// 获取容器尺寸
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
// 计算需要生成的水印数量
const cols = Math.ceil(containerWidth / horizontalGap) + 1;
const rows = Math.ceil(containerHeight / verticalGap) + 1;
// 生成水印元素
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
const watermarkItem = document.createElement("div");
watermarkItem.className = "watermark-item";
watermarkItem.textContent = watermarkText;
// 设置水印位置
watermarkItem.style.left = j * horizontalGap + "px";
watermarkItem.style.top = i * verticalGap + "px";
container.appendChild(watermarkItem);
}
}
</script>
</body>
</html>上述代码中，transform: rotate(-30deg)就是设置旋转角度的核心代码，负数表示逆时针旋转，正数表示顺时针旋转，你可以根据需要调整角度数值，比如设置为45deg就是顺时针旋转45度。
二、Canvas绘制旋转水印
如果需要生成动态水印或者避免水印被用户通过开发者工具轻易修改，可以使用canvas绘制水印，同样支持设置旋转角度。
实现步骤
- 创建canvas元素，设置尺寸与页面一致
- 获取canvas上下文，设置文字样式
- 通过
ctx.rotate()方法设置旋转角度，注意需要先平移坐标系再旋转 - 将canvas转换为图片，设置为页面背景
代码示例
// 创建canvas元素
const canvas = document.createElement("canvas");
// 设置canvas尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 获取2D上下文
const ctx = canvas.getContext("2d");
// 设置文字样式
ctx.font = "20px Arial";
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.textAlign = "left";
ctx.textBaseline = "middle";
// 水印文本
const text = "内部资料";
// 水印间距
const gapX = 200;
const gapY = 150;
// 设置旋转角度，单位是弧度，30度对应的弧度是 Math.PI / 6
const rotateAngle = -Math.PI / 6;
// 遍历绘制水印
for (let y = -gapY; y < canvas.height + gapY; y += gapY) {
for (let x = -gapX; x < canvas.width + gapX; x += gapX) {
// 保存当前上下文状态
ctx.save();
// 将坐标系平移到当前水印位置
ctx.translate(x, y);
// 设置旋转角度
ctx.rotate(rotateAngle);
// 绘制水印文本
ctx.fillText(text, 0, 0);
// 恢复上下文状态
ctx.restore();
}
}
// 将canvas转换为图片URL
const watermarkUrl = canvas.toDataURL("image/png");
// 设置为页面背景
document.body.style.backgroundImage = `url(${watermarkUrl})`;canvas方案中，旋转角度需要使用弧度单位，转换公式是：角度 * Math.PI / 180，比如30度就是30 * Math.PI / 180 = Math.PI / 6，调整该数值即可改变水印的旋转角度。
两种方案对比
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| CSS transform DOM水印 | 实现简单，兼容性好，调整方便 | 容易被开发者工具修改删除 | 普通静态页面，对水印安全性要求不高 |
| Canvas绘制水印 | 水印为图片形式，不易被修改 | 实现稍复杂，动态修改需要重新绘制 | 对水印安全性有一定要求的场景 |
根据实际需求选择合适的方案，即可快速实现带旋转角度的HTML页面水印效果。
HTMLwater_markCSS_transformcanvas前端水印修改时间：2026-06-06 18:13:52