前端水印效果

最新推荐文章于 2024-07-25 09:24:40 发布

haogemr

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量468

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/document_dom/article/details/139861727

版权

在这里插入图片描述

<!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>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }

        p {
            width: 50px;
            margin: 0 auto;
            overflow: auto;
        }

        button {
            padding: 50px;
        }

        .mask-div1 {
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw;
            pointer-events: none;
        }
        .mask-div2 {
            width: 200vw;
            height: 200vh;
            transform: translate(-50vw, -50vh);
            opacity: 0.5;
        }
    </style>
</head>

<body>
    <div id="watermark">
        <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
        <button onclick="myClick()">按钮点击</button>
    </div>

    <script>
        const canvas = document.createElement('canvas');
        canvas.setAttribute("width", '200px');
        canvas.setAttribute("height", '150px');
        const mask_div1 = document.createElement('div');
        const mask_div2 = document.createElement('div');
        const ctx = canvas.getContext("2d");
        ctx.font = "normal 16px Microsoft Yahei"; //设置样式
        ctx.fillStyle = '#ccc';
        ctx.translate(0, 80);//平移
        ctx.rotate(-30 * Math.PI / 180); //旋转
        ctx.fillText("2024-12-12 12:00:00", 0, 20);
        ctx.font = "normal 12px Microsoft Yahei"; //设置样式
        ctx.fillText("水印水印", 0, 40);
        document.body.appendChild(canvas);
        const src = canvas.toDataURL("image/png");
        mask_div1.setAttribute('class', 'mask-div1')
        mask_div2.setAttribute('class', 'mask-div2')
        mask_div2.style.backgroundImage = 'url(' + src + ')';
        mask_div1.appendChild(mask_div2);
        document.body.appendChild(mask_div1);
        canvas.remove()


        function myClick() {
            alert('你好');
        }
    </script>

</body>

</html>