使用Canvas创建透明水印覆盖内容，通过JavaScript绘制文字或图片并叠加到目标区域，支持动态更新与响应式适配，有效标识来源且难以直接移除。
在HTML5中实现水印效果，主要通过 Canvas 元素绘制透明文字或图案，并将其作为叠加层覆盖在目标内容上。这种方式灵活、兼容性好，适合为图片、文档预览区域甚至视频添加动态水印。
1. 创建Canvas作为水印层
使用元素创建一个透明画布，设置其位置为绝对定位，覆盖在目标内容上方。通过JavaScript在画布上绘制文字或图像水印。
示例代码：
function createWatermark(text = '私密文件', font = '20px Microsoft YaHei', fillStyle = 'red') {const canvas = document.getElementById('watermark');const ctx = canvas.getContext('2d');
// 设置画布尺寸为窗口大小canvas.width = window.innerWidth;canvas.height = window.innerHeight;
// 文字旋转角度和间距const angle = -30 * Math.PI / 180;const stepX = 200;const stepY = 100;
ctx.font = font;ctx.fillStyle = fillStyle;ctx.textAlign = 'center';ctx.textBaseline = 'middle';
// 绘制网格状水印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('机密 - 张三');
2. 叠加到目标区域（如图片或内容区）
若只为某个特定区域（如一个div或图片容器）添加水印，可将Canvas的尺寸和位置限制在该容器内。
立即学习“前端免费学习笔记（深入）”；
操作方法：
获取目标容器的位置和大小（getBoundingClientRect）设置Canvas宽高与容器一致，并定位在其左上角将Canvas插入容器内部或浮于其上
示例：为一个id为contentArea的div添加水印
const container = document.getElementById('contentArea');const rect = container.getBoundingClientRect();const canvas = document.createElement('canvas');canvas.width = rect.width;canvas.height = rect.height;canvas.style.cssText = position: absolute; top: ${rect.top}px; left: ${rect.left}px; pointer-events: none; z-index: 999; opacity: 0.15; ;document.body.appendChild(canvas);
// 在canvas上绘制水印（同上）const ctx = canvas.getContext('2d');ctx.font = 'bold 30px Arial';ctx.fillStyle = 'gray';ctx.rotate(-30 * Math.PI / 180);ctx.fillText('内部资料', 50, 100);
3. 高级技巧：图片水印与动态更新
除了文字，还可以绘制图片作为水印（如公司Logo）。
使用drawImage()方法：
const img = new Image();img.src = 'logo.png';img.onload = function() { ctx.drawImage(img, 0, 0, 50, 50); // 绘制小图标}
也可以结合用户信息动态生成水印，例如：
createWatermark(`仅限 ${userName} 查看`);
基本上就这些。Canvas水印轻量、难以删除（除非截图后编辑），适合前端防误传播。注意：它不能防止截图，但能明确标识来源。实际项目中可封装成函数或组件调用，灵活复用。不复杂但容易忽略细节，比如字体加载、坐标变换和响应式适配。
以上就是HTML5代码如何实现水印效果 HTML5代码Canvas叠加层的制作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1595096.html
微信扫一扫 
支付宝扫一扫 
