html 水印效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水印</title>
</head>
<body>
<div class="warp">
<div class="title">我是标题</div>
<div class="content">
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
我是内容我是内容我是内容我是内容我是内容我是内容
</div>
</div>
</body>
</html>
<script>
function addWaterMarker(str){
var can = document.createElement('canvas');
var body = document.body;
body.appendChild(can);
can.width=400; //画布的宽
can.height=200;//画布的高度
can.style.display='none';
var cans = can.getContext('2d');
cans.rotate(-20*Math.PI/180); //画布里面文字的旋转角度
cans.font = "16px Microsoft JhengHei"; //画布里面文字的字体
cans.fillStyle = "rgba(17, 17, 17, 0.50)";//画布里面文字的颜色
cans.textAlign = 'left'; //画布里面文字的水平位置
cans.textBaseline = 'Middle'; //画布里面文字的垂直位置
cans.fillText(str,can.width/3,can.height/2); //画布里面文字的间距比例
body.style.backgroundImage="url("+can.toDataURL("image/png")+")"; //把画布插入到body中
}
//调用这个方法即可
addWaterMarker("水印");
</script>
摘录网络：
本文来自博客园，作者：太太怕我，转载请注明原文链接：https://www.cnblogs.com/Andy-Blog/p/11050962.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现