原生js实现水印背景

参考文档：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();

效果：