<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
text-align: center;
}
p {
width: 50px;
margin: 0 auto;
overflow: auto;
}
button {
padding: 50px;
}
.mask-div1 {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
pointer-events: none;
}
.mask-div2 {
width: 200vw;
height: 200vh;
transform: translate(-50vw, -50vh);
opacity: 0.5;
}
</style>
</head>
<body>
<div id="watermark">
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>
<button onclick="myClick()">按钮点击</button>
</div>
<script>
const canvas = document.createElement('canvas');
canvas.setAttribute("width", '200px');
canvas.setAttribute("height", '150px');
const mask_div1 = document.createElement('div');
const mask_div2 = document.createElement('div');
const ctx = canvas.getContext("2d");
ctx.font = "normal 16px Microsoft Yahei"; //设置样式
ctx.fillStyle = '#ccc';
ctx.translate(0, 80);//平移
ctx.rotate(-30 * Math.PI / 180); //旋转
ctx.fillText("2024-12-12 12:00:00", 0, 20);
ctx.font = "normal 12px Microsoft Yahei"; //设置样式
ctx.fillText("水印水印", 0, 40);
document.body.appendChild(canvas);
const src = canvas.toDataURL("image/png");
mask_div1.setAttribute('class', 'mask-div1')
mask_div2.setAttribute('class', 'mask-div2')
mask_div2.style.backgroundImage = 'url(' + src + ')';
mask_div1.appendChild(mask_div2);
document.body.appendChild(mask_div1);
canvas.remove()
function myClick() {
alert('你好');
}
</script>
</body>
</html>
前端水印效果
最新推荐文章于 2024-08-24 11:46:12 发布