这里是添加到body上的,如果想添加到指定容器,可以在代码最后一行更改要添加水印的容器
// text是水印的文字内容
function waterMark = function (text) {
if (document.getElementById('waterMark')) return
// 旋转角度大小
var rotateAngle = Math.PI / 6;
// labels是要显示的水印文字,垂直排列
var labels = new Array();
labels.push(text);
let pageWidth = document.body.clientWidth
let pageHeight = document.body.clientHeight
let canvas = document.createElement('canvas');
let canvasWidth = canvas.width = pageWidth;
let canvasHeight = canvas.height = pageHeight;
var context = canvas.getContext('2d');
context.font = "15px Arial";
// 先平移到画布中心
context.translate(pageWidth / 2, pageHeight / 2 - 250);
// 在绕画布逆方向旋转30度
context.rotate(-rotateAngle);
// 在还原画布的坐标中心
context.translate(-pageWidth / 2, -pageHeight / 2);
// 获取文本的最大长度
let textWidth = Math.max(...labels.map(item => context.measureText(item).width));
let lineHeight = 15, fontHeight = 12, positionY, i
i = 0, positionY = 0
while (positionY <= pageHeight) {
positionY = positionY + lineHeight * 5
i++
}
canvasWidth += Math.sin(rotateAngle) * (positionY + i * fontHeight) // 给canvas加上画布向左偏移的最大距离
canvasHeight = 2 * canvasHeight
for (positionY = 0, i = 0; positionY <= canvasHeight; positionY = positionY + lineHeight * 5) {
// 进行画布偏移是为了让画布旋转之后水印能够左对齐;
context.translate(-(Math.sin(rotateAngle) * (positionY + i * fontHeight)), 0);
for (let positionX = 0; positionX < canvasWidth; positionX += 2 * textWidth) {
let spacing = 0;
labels.forEach(item => {
context.fillText(item, positionX, positionY + spacing);
spacing = spacing + lineHeight;
})
}
context.translate(Math.sin(rotateAngle) * (positionY + i * fontHeight), 0);
context.restore();
i++
}
let dataUrl = canvas.toDataURL('image/png');
let waterMarkPage = document.createElement('div');
waterMarkPage.id = "waterMark"
let style = waterMarkPage.style;
style.position = 'fixed';
style.overflow = "hidden";
style.left = 0;
style.top = 0;
style.opacity = '0.4';
style.background = "url(" + dataUrl + ")";
style.zIndex = 999;
style.pointerEvents = "none";
style.width = '100%';
style.height = '100vh';
document.body.appendChild(waterMarkPage);
}