前端如何实现水印效果？Canvas方案详解（支持参数配置与弧度解析）

最新推荐文章于 2026-06-18 21:05:44 发布

原创最新推荐文章于 2026-06-18 21:05:44 发布 · 415 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #水印 #waterMark #安全 #canvas

一、为什么需要水印

在实际项目中，水印常用于：

防止页面截图泄露
标识用户身份（用户名 / 时间）
数据安全（内部系统）

二、实现方案总览

常见前端水印方案：

CSS 水印（简单）
Canvas 水印（推荐）
SVG 水印（高级）
前端 + 后端动态水印（最安全）

本文重点讲 Canvas 实现（企业最常用）

三、Canvas 实现水印（推荐方案）

✅ 特点

可动态传参（文本、角度、透明度）
可重复铺满
不易被直接删除

四、核心代码（可直接复用）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水印</title>
<style>
  body {
    margin: 0;
  }
  #watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
  }
</style>
</head>

<body>

<div id="watermark"></div>

<script>
function createWatermark(options = {}) {
  const {
    text = '水印内容',
    angle = -20,
    fontSize = 16,
    color = 'rgba(0,0,0,0.1)',
    gapX = 200,
    gapY = 150
  } = options

  const canvas = document.createElement('canvas')
  canvas.width = gapX
  canvas.height = gapY

  const ctx = canvas.getContext('2d')

  // 关键：角度转弧度
  const radian = angle * Math.PI / 180
  ctx.rotate(radian)

  ctx.font = `${fontSize}px Arial`
  ctx.fillStyle = color
  ctx.fillText(text, 20, 100)

  const base64 = canvas.toDataURL()

  const watermark = document.getElementById('watermark')
  watermark.style.backgroundImage = `url(${base64})`
  watermark.style.backgroundRepeat = 'repeat'
}

// 使用
createWatermark({
  text: '公司机密',
  angle: -20
})
</script>

</body>
</html>

五、参数说明（可扩展）

参数	说明
text	水印文字
angle	旋转角度
fontSize	字体大小
color	颜色
gapX	水平间距
gapY	垂直间距

六、为什么要用弧度（重点）

Canvas 中：

ctx.rotate(angle)

👉 angle 必须是弧度（radian）

角度转弧度公式：

弧度 = 角度 × π / 180

示例：

const radian = -20 * Math.PI / 180
ctx.rotate(radian)

为什么用 -20？

负数：顺时针旋转
20°：视觉上最舒服

七、增强方案（企业级）

1. 防删除（水印被移除）

setInterval(() => {
  if (!document.getElementById('watermark')) {
    createWatermark()
  }
}, 2000)

2. 多信息水印

createWatermark({
  text: '张三 2026-04-20'
})