js文字添加水印怎么做

在网页中添加水印是一种常见的保护版权的方式，尤其在显示重要的文本内容时。使用JavaScript可以轻松实现文字水印、利用Canvas API、设置CSS样式。其中，利用Canvas API的方法最为常见，也最为灵活。下面，我们将详细介绍如何使用这几种方法实现文字水印效果。

一、使用Canvas API实现文字水印

Canvas API是HTML5引入的一个强大工具，可以用来绘制图形、处理图像和渲染复杂的视觉效果。我们可以利用Canvas API来生成带有水印的图片，然后将其作为背景图应用到网页元素中。

1. 创建Canvas元素

首先，我们需要在HTML中创建一个Canvas元素，并获取其2D绘图上下文。

<canvas id="watermarkCanvas" style="display:none;"></canvas>

2. 绘制水印

接下来，我们使用JavaScript在Canvas上绘制水印文本。

function addWatermark(text, fontSize, color, opacity, angle) {
    var canvas = document.getElementById('watermarkCanvas');
    var context = canvas.getContext('2d');
    canvas.width = 400;
    canvas.height = 200;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = `${fontSize}px Arial`;
    context.fillStyle = color;
    context.globalAlpha = opacity;
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    context.rotate(angle * Math.PI / 180);
    context.fillText(text, 0, 0);
    context.restore();
    return canvas.toDataURL();
}

3. 应用水印

最后，将生成的水印图片应用到网页元素的背景中。

document.body.style.backgroundImage = `url(${addWatermark('Your Watermark', 40, 'red', 0.5, 45)})`;

二、使用CSS和HTML实现文字水印

虽然Canvas API是添加水印的强大工具，但有时我们只需要简单的文字水印，这时可以使用CSS和HTML来实现。

1. 创建水印容器

首先，在HTML中创建一个容器元素，用于放置水印文本。

<div class="watermark-container">
  <div class="watermark-text">Your Watermark</div>
</div>

2. 设置CSS样式

接下来，为容器和水印文本设置样式，使其能够覆盖在网页内容上。

.watermark-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}
.watermark-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0.3;
  font-size: 40px;
  color: red;
}

三、使用JavaScript动态生成CSS水印

在某些情况下，我们可能希望在运行时动态生成水印。这可以通过JavaScript动态创建CSS样式和HTML元素来实现。

1. 动态生成CSS样式

function addCSSWatermark(text) {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = `
        .dynamic-watermark-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }
        .dynamic-watermark-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-45deg);
            opacity: 0.3;
            font-size: 40px;
            color: red;
        }
    `;
    document.getElementsByTagName('head')[0].appendChild(style);
}

2. 动态生成HTML元素

function createWatermarkElement(text) {
    var container = document.createElement('div');
    container.className = 'dynamic-watermark-container';
    var watermarkText = document.createElement('div');
    watermarkText.className = 'dynamic-watermark-text';
    watermarkText.innerText = text;
    container.appendChild(watermarkText);
    document.body.appendChild(container);
}
// 调用函数
addCSSWatermark();
createWatermarkElement('Your Watermark');

四、综合应用与高级技巧

为了确保水印在各种情况下都能正常显示，我们可以结合以上方法，或者利用更多高级技巧，如响应式设计和自适应调整等。

1. 响应式水印

通过CSS媒体查询，我们可以调整水印在不同屏幕尺寸下的样式。

@media (max-width: 600px) {
    .watermark-text, .dynamic-watermark-text {
        font-size: 20px;
    }
}

2. 多重水印

在某些情况下，我们可能希望在页面的多个位置重复显示水印。这可以通过在页面上添加多个水印元素来实现。

function addMultipleWatermarks(text) {
    for (let i = 0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
            let watermark = document.createElement('div');
            watermark.className = 'dynamic-watermark-text';
            watermark.style.top = `${i * 20}%`;
            watermark.style.left = `${j * 20}%`;
            watermark.innerText = text;
            document.body.appendChild(watermark);
        }
    }
}
// 调用函数
addCSSWatermark();
addMultipleWatermarks('Your Watermark');

3. 添加水印到特定元素

有时，我们只希望在特定的元素上添加水印，而不是整个页面。这时我们可以选择特定的元素，并将水印添加到该元素的背景中。

function addElementWatermark(elementId, text, fontSize, color, opacity, angle) {
    var element = document.getElementById(elementId);
    if (element) {
        element.style.position = 'relative';
        var watermark = document.createElement('div');
        watermark.className = 'dynamic-watermark-text';
        watermark.style.position = 'absolute';
        watermark.style.top = '50%';
        watermark.style.left = '50%';
        watermark.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
        watermark.style.fontSize = `${fontSize}px`;
        watermark.style.color = color;
        watermark.style.opacity = opacity;
        watermark.innerText = text;
        element.appendChild(watermark);
    }
}
// 调用函数
addElementWatermark('specificElement', 'Your Watermark', 40, 'red', 0.5, 45);

通过以上方法，我们可以在网页中灵活地添加文字水印，保护版权或实现其他功能需求。无论是利用Canvas API、CSS和HTML，还是通过JavaScript动态生成水印，都可以根据具体情况选择合适的方法。