js waterMark，水印实现的三种方法，并防止去除

在JavaScript中实现水印功能，并防止用户去除水印，可以通过以下三种方法：

1. 使用Canvas绘制水印
2. 使用CSS属性为元素添加背景图片
3. 使用HTML属性contenteditable创建可编辑区域

方法1：使用Canvas绘制水印

function createWatermark(text) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 300;
    canvas.height = 200;
    ctx.font = '20px Arial';
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
    ctx.rotate(-20 * Math.PI / 180);
    ctx.fillText(text, -100, 150);
 
    return canvas;
}
 
document.body.style.backgroundImage = 'url(' + createWatermark('Watermark').toDataURL('image/png') + ')';

方法2：使用CSS属性为元素添加背景图片

.watermark {
    background-image: url('watermark.png');
    background-repeat: repeat;
    background-position: center;
}

document.body.classList.add('watermark');

方法3：使用HTML属性contenteditable创建可编辑区域

<div contenteditable="true">
    这是一个可编辑的区域，但不能去除水印。
</div>

在这些方法中，Canvas和CSS方法可以生成图片作为水印，而contenteditable属性则创建了一个可以接受输入但不容易被删除的区域。但是，请注意，任何客户端的JavaScript水印都不能完全防止用户去除，因为最终还是需要依赖于客户端的环境。