前端实现页面水印

最新推荐文章于 2024-03-30 04:58:44 发布

修复bug

最新推荐文章于 2024-03-30 04:58:44 发布

阅读量411

点赞数 7

文章标签：前端 css vue.js javascript

本文链接：https://blog.csdn.net/m0_71349739/article/details/136316155

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
            list-style: none;
        }

        html {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0 !important;
            padding: 0;
            height: auto;
        }

        .box {
            width: 100%;
            height: 100vh;
            overflow: scroll;
            border: 1px solid red;
        }

        /* 滚动条样式 */
        .box::-webkit-scrollbar {
            width: 10px;
            background: #fff;
        }

        .box::-webkit-scrollbar-thumb {
            border-radius: 3px;
            height: 100px;
            background-color: #d5dde8;
            margin-left: 6px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
        <p>123421</p>
    </div>
    <script>
        function addWaterMarker(str, name, number) {
            let can = document.createElement('canvas');
            let body = document.body;
            body.appendChild(can);
            can.width = 180;
            can.height = 150;
            can.style.display = 'none';
            let cans = can.getContext('2d');
            cans.rotate(-20 * Math.PI / 180);
            cans.font = "normal  12px Microsoft JhengHei";
            cans.fillStyle = "rgba(223, 223, 223, 1)";
            cans.textAlign = 'center';
            cans.textBaseline = 'Middle';
            let nameNo = name + ' ' + str;
            cans.fillText(nameNo, can.width / 3, can.height / 2);
            cans.fillText(number, can.width / 2.7, can.height / 1.6);
            let dom = document.querySelector('.box')
            dom.style.backgroundImage = `url(${can.toDataURL("image/png" + '')})`;
            dom.style.backgroundColor = "#fff";
        }
        addWaterMarker('张三', 'Code12345', 1888888888)
    </script>
</body>

</html>