首页 > 文章 > 前端

HTML5代码如何实现水印效果 HTML5代码Canvas叠加层的制作

时间：2025-11-16 10:17:21 290浏览收藏

珍惜时间，勤奋学习！今天给大家带来《HTML5代码如何实现水印效果 HTML5代码Canvas叠加层的制作》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

使用Canvas创建透明水印覆盖内容，通过JavaScript绘制文字或图片并叠加到目标区域，支持动态更新与响应式适配，有效标识来源且难以直接移除。

在HTML5中实现水印效果，主要通过 Canvas 元素绘制透明文字或图案，并将其作为叠加层覆盖在目标内容上。这种方式灵活、兼容性好，适合为图片、文档预览区域甚至视频添加动态水印。

1. 创建Canvas作为水印层

使用元素创建一个透明画布，设置其位置为绝对定位，覆盖在目标内容上方。通过JavaScript在画布上绘制文字或图像水印。

示例代码：

<canvas id="watermark" style="position: absolute; top: 0; left: 0; pointer-events: none; z-index: 999; opacity: 0.2;"></canvas>
<p><script>
function createWatermark(text = '私密文件', font = '20px Microsoft YaHei', fillStyle = 'red') {
const canvas = document.getElementById('watermark');
const ctx = canvas.getContext('2d');</p><p>// 设置画布尺寸为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;</p><p>// 文字旋转角度和间距
const angle = -30 * Math.PI / 180;
const stepX = 200;
const stepY = 100;</p><p>ctx.font = font;
ctx.fillStyle = fillStyle;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';</p><p>// 绘制网格状水印
for (let x = 0; x < canvas.width; x += stepX) {
for (let y = 0; y < canvas.height; y += stepY) {
ctx.save();
ctx.translate(x + stepX/2, y + stepY/2);
ctx.rotate(angle);
ctx.fillText(text, 0, 0);
ctx.restore();
}
}
}
// 调用生成水印
createWatermark('机密 - 张三');
</script></p>

2. 叠加到目标区域（如图片或内容区）

若只为某个特定区域（如一个div或图片容器）添加水印，可将Canvas的尺寸和位置限制在该容器内。

操作方法：

获取目标容器的位置和大小（getBoundingClientRect）
设置Canvas宽高与容器一致，并定位在其左上角
将Canvas插入容器内部或浮于其上

示例：为一个id为contentArea的div添加水印

const container = document.getElementById('contentArea');
const rect = container.getBoundingClientRect();
<p>const canvas = document.createElement('canvas');
canvas.width = rect.width;
canvas.height = rect.height;
canvas.style.cssText = <code> position: absolute; top: ${rect.top}px; left: ${rect.left}px; pointer-events: none; z-index: 999; opacity: 0.15; </code>;
document.body.appendChild(canvas);</p><p>// 在canvas上绘制水印（同上）
const ctx = canvas.getContext('2d');
ctx.font = 'bold 30px Arial';
ctx.fillStyle = 'gray';
ctx.rotate(-30 * Math.PI / 180);
ctx.fillText('内部资料', 50, 100);</p>

3. 高级技巧：图片水印与动态更新

除了文字，还可以绘制图片作为水印（如公司Logo）。

使用drawImage()方法：

const img = new Image();
img.src = 'logo.png';
img.onload = function() {
  ctx.drawImage(img, 0, 0, 50, 50); // 绘制小图标
}

也可以结合用户信息动态生成水印，例如：

createWatermark(`仅限 ${userName} 查看`);

基本上就这些。Canvas水印轻量、难以删除（除非截图后编辑），适合前端防误传播。注意：它不能防止截图，但能明确标识来源。实际项目中可封装成函数或组件调用，灵活复用。不复杂但容易忽略细节，比如字体加载、坐标变换和响应式适配。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

HTML5代码