原生 canvas版水印

Mtao&

已于 2024-08-07 10:32:28 修改

阅读量211

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2024-08-07 10:27:16 首次发布

本文链接：https://blog.csdn.net/qq_45186619/article/details/140983443

版权

<!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>
      * {
        list-style: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      #watermaker {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }
      .setting {
        position: fixed;
        top: 0;
        right: 20px;
      }
      input {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="setting">
      <div>
        <label for="xz">旋转</label>
        <input id="xz" type="number" name="xz" value="0" />
      </div>
      <div>
        <label for="fontsize">字体大小</label>
        <input id="fontsize" type="number" name="fontsize" value="20" />
      </div>
    </div>
    <div id="watermaker"></div>
    <script>
      let watermakerDom = document.querySelector("#watermaker");
      let canvas = document.createElement("canvas");
      let xzinput = document.querySelector("#xz");
      let fontsize = document.querySelector("#fontsize");
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      let ctx = canvas.getContext("2d");
      let size=16;
      let rotate=-40;
      canvas.width = 200;
      canvas.height = 200;
      canvas.style.cssText = `
        border: 1px solid red;
      `;
      xzinput.value=rotate;
      fontsize.value=size;
      
      getDataUrl(rotate,size);
      xzinput.addEventListener("input", function (e) {
        rotate=e.target.value;
        getDataUrl(rotate,size);
      });
      fontsize.addEventListener("input", function (e) {
        size=e.target.value;
        getDataUrl(rotate,size);
      });
      function getDataUrl(rotate,size) {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
       

        ctx.font = `${size}px normal`;
        ctx.fillStyle = "rgba(180, 180, 180, 0.3)";
        ctx.textAlign = "center";
        ctx.save(); // 保存当前状态

        ctx.translate(canvas.width / 2, canvas.height / 2); // 移动到画布中心

        ctx.rotate((rotate * Math.PI) / 180);

        ctx.fillText('请勿外传', 0, 0);

        ctx.restore();// 恢复之前的上下文状态

        let url=canvas.toDataURL("image/png");
        watermakerDom.style.cssText=`
            background:url(${url});
        `
      }
    </script>

  </body>
</html>