html 水印效果

分手后的思念是犯贱 2021-12-09 00:05 382阅读 0赞

<!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