明水印
内容生成：svg
1.动态生成svg图片，给body元素添加背景图片，设置背景图片的样式
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态生成 SVG 水印示例</title><style>/* 页面内容样式 */body {margin: 0;min-height: 100vh;position: relative;}.content {position: relative;z-index: 2;text-align: center;margin-top: 20%;}</style>
</head><body><div class="content"><h1>这是一个带动态水印的页面</h1><p>页面背景上显示了动态生成的SVG水印。</p></div><script>// 动态生成SVG水印function createWatermark(text) {const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"><text x="50%" y="50%" text-anchor="middle" font-size="30" fill="rgba(0,0,0,0.1)" transform="rotate(-45 75,75)" dy=".3em">${text}</text></svg>`;return `url('data:image/svg+xml,${encodeURIComponent(svg)}')`;}// 将水印应用到页面背景document.body.style.backgroundImage = createWatermark('动态水印');document.body.style.backgroundRepeat = 'repeat';document.body.style.backgroundSize = '150px 150px';document.body.style.backgroundPosition = 'top left';</script>
</body></html>2.创建canvas元素，填充水印文字，获取水印的宽高，根据容器的宽高平铺
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas Watermark</title><style>body,html {margin: 0;padding: 0;height: 100%;}#watermarkCanvas {position: fixed;top: 0;left: 0;pointer-events: none;/* 让水印层不干扰页面的交互 */z-index: 9999;/* 确保水印层在最上层 */}</style>
</head><body><div style="height: 2000px;"><h1>欢迎来到我的网页!</h1><p>这是一个示例网页，页面内容较长，以演示水印如何平铺整个页面。</p></div><canvas id="watermarkCanvas"></canvas><script>// 获取canvas元素const canvas = document.getElementById('watermarkCanvas');const ctx = canvas.getContext('2d');// 设置水印文字和样式const watermarkText = '这是水印';const watermarkFont = '30px bold Arial';const watermarkColor = 'rgba(0, 0, 0, 0.3)'; // 透明黑色// 更新canvas尺寸为页面的尺寸function setCanvasSize() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}// 绘制水印function drawWatermark() {// 清空canvasctx.clearRect(0, 0, canvas.width, canvas.height);// 设置字体和颜色ctx.font = watermarkFont;ctx.fillStyle = watermarkColor;ctx.textAlign = 'center';ctx.textBaseline = 'middle';const margin = 100; // 水印文字间距// 获取水印的宽高const textWidth = ctx.measureText(watermarkText).width;const textHeight = parseInt(watermarkFont); // 获取字体的高度// 水印平铺for (let y = 0; y < canvas.height; y += textHeight + margin) {for (let x = 0; x < canvas.width; x += textWidth + margin) {ctx.save();ctx.translate(x, y);ctx.rotate(-30 * Math.PI / 180); // 设置水印倾斜角度ctx.fillText(watermarkText, 0, 0);ctx.restore();}}}// 调整窗口大小时更新canvas尺寸和水印window.addEventListener('resize', () => {setCanvasSize();drawWatermark();});// 初始化时设置canvas大小并绘制水印setCanvasSize();drawWatermark();</script></body></html>3创建canvas元素，填充图片水印，获取水印的宽高，根据容器的宽高平铺
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas 水印</title><style>body,html {margin: 0;padding: 0;height: 100%;overflow: hidden;}canvas {position: absolute;top: 0;left: 0;pointer-events: none;/* 确保 canvas 不会拦截鼠标事件 */}</style>
</head><body><canvas id="watermarkCanvas"></canvas><script>const canvas = document.getElementById("watermarkCanvas");const ctx = canvas.getContext("2d");// 设置 canvas 大小function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}// 调整 canvas 大小resizeCanvas();// 页面大小变化时调整 canvaswindow.addEventListener('resize', resizeCanvas);// 加载 logo 图片const watermarkImage = new Image();watermarkImage.src = 'img.png '; watermarkImage.onload = function() {// 图片加载完成后，绘制水印drawWatermark();};function drawWatermark() {const imageWidth = 100; // 水印图片的宽度const imageHeight = 100; // 水印图片的高度// 清空 canvasctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制水印for (let y = 0; y < canvas.height; y += imageHeight) {for (let x = 0; x < canvas.width; x += imageWidth) {ctx.globalAlpha = 0.3; // 设置透明度ctx.drawImage(watermarkImage, x, y, imageWidth, imageHeight);}}}</script>
</body></html>
和端口映射)