效果圖
代碼
<!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();
}
}
}