效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
html,body{
width: 100%;
height: 100%;
}
</style>
<body >
<div style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;">
<div>坚持就是胜利</div>
</div>
<script>
// https://www.runoob.com/jsref/dom-obj-canvas.html
let watermark = {};
let setWatermark = (str) => {
let id = '1.23452384164.123412415';
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
}
let can = document.createElement('canvas');
can.width = 350;
can.height = 120;
let cans = can.getContext('2d');
// getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性，可用于在画布上绘制文本、线条、矩形、圆形等等。
cans.rotate(-20 * Math.PI / 180);
// Math.PI = 3.14 = 180° 1度
cans.font = '16px Vedana';
// Verdana是一套无衬线字体
// cans.fillStyle = 'rgba(242, 242, 242, 0.10)';
cans.fillStyle = 'blue'; //方便观看的颜色，正常使用删掉
cans.textAlign = 'left';
cans.textBaseline = 'Middle';
cans.fillText(str, can.width / 20, can.height);
let div = document.createElement('div');
div.id = id;
div.style.pointerEvents = 'none';
// 元素永远不会成为鼠标事件的target。
div.style.top = '3px';
div.style.left = '0px';
div.style.position = 'fixed';
div.style.zIndex = '100000';
div.style.width = document.documentElement.clientWidth + 'px';
div.style.height = document.documentElement.clientHeight + 'px';
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
// left：背景图像在横向上填充从左边开始；
// background-repeat 背景图像在横向和纵向平铺
document.body.appendChild(div);
return id;
};
// 该方法只允许调用一次
watermark.set = (str) => {
let id = setWatermark(str);
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str);
}
}, 2000);
window.onresize = () => {
// 当浏览器被重置大小时执行Javascript代码:
setWatermark(str);
};
};
watermark.set("不必比较，在自己的时区前行")
// export default watermark;
</script>
</body>
</html>
项目中使用
- 把相关js放到 assets 文件夹中
- 直接引入到mian.js中 import watermark from ‘./assets/js/watermark’;//水印
- 放到原型上 Vue.prototype.$watermark = watermark;//水印
相关API
进阶（Vue中某些页面不想使用水印）
多种方法,下面是其中一种
- 把上面方法放到自己自定义class类的私有属性上（static）
- 在私有属性上加个移除DOM的函数
- 如果想要在某些页面不使用水印,可以监听$route，然后触发函数，判断路由的path然后决定是否加水印或者移除水印
- $route 作为vue实例的一个响应式属性，是和你在data中写的属性本质上是一样的，都可以通过this的方式拿到。既然你可以监听data中的属性变化，同样也可以监听 $route 的变化。watch中监听的对象默认回调函数中的参数值就是newVal,oldVal。作为 $route 属性来说当然也就是 to 和 from 的概念了。
watch : {
$route(v) {
this.$_setWatermark(v.path);
}
},
methods : {
$_setWatermark(routePath) {
// 若地址不为登录页和首页，则设置水印
if (routePath !== '/main/home' && routePath !== '/login') {
this.$watermark.setWatermark(this.content); //水印
} else {
this.$watermark..removeWatermark();
}
}
}