使用js在网页添加水印
时间: 2023-11-16 16:04:51 浏览: 45
可以使用canvas绘制文本实现在网页上添加水印。
以下是一个简单的在网页上添加水印的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>添加水印</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="watermark"></canvas>
<script>
var canvas = document.getElementById('watermark');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.font = '20px Arial';
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.rotate(-Math.PI / 4);
ctx.fillText('watermark', -canvas.height / 2, canvas.width / 2);
</script>
</body>
</html>
```
在上面的代码中,我们使用canvas创建了一个id为watermark的画布,并获取了其上下文对象。然后设置了画布的宽高,设置了字体样式和颜色,并将文字进行了旋转和绘制。最后将画布添加到网页上,就可以在网页上看到水印了。
需要注意的是,如果需要在网页上添加真正的防伪水印,还需要使用更加复杂的算法和技术,比如用图片或者视频作为水印,或者使用多种方式对水印进行加密和验证等。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)