参考文档:https://juejin.cn/post/6844904095749242888
/*
1.通过canvas生成水印图片
2.把图片作为div的背景让其平铺
*/
const setWatermark = () => {
let canvas = document.createElement('canvas');
canvas.width = 120;
canvas.height = 80;
canvas.style.border = '1px solid red';
let ctx = canvas.getContext('2d');
ctx.rotate(-30 * Math.PI / 180);
ctx.font = '15px Vedana';
ctx.fillStyle = '#444'
ctx.fillText('这是一个水印', 10, 70);
let div = document.createElement('div');
div.style.pointerEvents = 'none';
div.style.top = '0px';
div.style.left = '0px';
div.style.opacity = '0.2';
div.style.position = 'fixed';
div.style.width = document.documentElement.clientWidth + 'px';
div.style.height = document.documentElement.clientHeight + 'px';
div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat';
let a = document.createElement('a');
a.innerText = '参考文档:https://juejin.cn/post/6844904095749242888';
a.href = 'https://juejin.cn/post/6844904095749242888';
let docFragments = document.createDocumentFragment();
docFragments.appendChild(a);
for (let i = 0; i < 100; i++) {
let divs = document.createElement('div');
divs.innerText = '我是一个滚动文字' + i;
docFragments.appendChild(divs);
}
docFragments.appendChild(div);
document.body.appendChild(docFragments);
}
setWatermark();
效果: