【HTML】使用canvas添加水印

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>添加水印</title>
    <style>
      html,
      body {
        margin: 0;
        background: #f4f5f7;
      }
      .content {
        margin: 10px;
        padding: 10px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 6px 0 rgba(0, 0, 0, 0.045);
      }
      .line {
        display: flex;
      }
      .paragraph {
        text-indent: 2rem;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div id="content" class="content">
      <div class="line">
        <div>
          <div class="paragraph">台湾海峡，是中国大陆与台湾岛之间连通南海、东海的海峡。西起福建省沿海，东至台湾岛西岸；南北界线有多种说法，一般标准是：南起台湾南端猫鼻头~广东南澳岛之间的连线，北至台湾北端富贵角~福建连江北茭的连线。</div>
          <div class="paragraph">台湾海峡NE向纵向延伸，长约400公里，面积约9万平方公里。南宽北窄，南口宽约400公里，北口宽约200公里，北部最窄处为130公里。</div>
          <div class="paragraph">台湾海峡，是贯通中国南北海运的要道，处于中国东海大陆架上，地形起伏不平，平均水深约60米。海峡位于亚热带、北热带季风气候区。受黑潮影响，海峡水温较高，盐度和透明度较大、风浪较大。</div>
          <div class="paragraph">台湾海峡资源丰富，是中国重要渔场之一。鲯、鲔和鲨为这里三大渔产。海峡底部富集油气资源，还有钛铁、磁铁、金红石、独居石和锆石等矿，品位高，储量大。</div>
          <div class="paragraph">
            海峡两岸，自古以来就是中国的神圣领土，周朝为七闽地，春秋以后为闽越地。秦置闽中郡，三国时吴国设建安郡，并派兵到台湾，北宋置福建路，并开始对台湾编户管辖，元设立福州、泉州2个行省。清代，福建区划继承明制，增设台湾府，属福建统辖。1885年，台湾府单独设省。辛亥革命后，均置福建省。
            [3]清光绪年间中日甲午战争中战败，据中日《马关条约》，清政府被迫割让台湾及澎湖于日本，直到1945年台湾光复，台湾及澎湖列岛重归中国版图。
          </div>
          <div class="paragraph">由于台湾海峡两岸都是中国领土，且海峡宽度在200海里以下，依据《联合国海洋法公约》，台湾海峡水域除了两岸12海里以内的“领海”外，大部分为中国的“专属经济区”。</div>
        </div>
        <div>
          <img src="https://bkimg.cdn.bcebos.com/pic/7a899e510fb30f2442a7ca0673c1c643ad4bd113a520?x-bce-process=image/resize,m_lfit,w_536,limit_1/quality,Q_70" alt="" srcset="" />
        </div>
      </div>
      <div class="paragraph">
        <div class="paragraph">
          台湾海峡，为位于闽、台两省间的海域，是连接东海与南海的水道。其南、北界限的划分不尽一致。南界常有二种划分，自台湾岛猫鼻头（有鹅銮鼻之说 [7]）至东山岛或南澳岛（还有认为福建与广东两省海岸交界处 [8]，或福建的诏安头 [7]）。北界常有三种划法，自台湾岛北端富贵角至福建连江北茭（黄歧半岛北茭咀
          [7]），或至闽江口或至平潭岛（海坛岛）北端痒角。
        </div>
        <div class="paragraph">
          《福建省志·海洋志》载：根据台湾海峡具有鲜明的综合特性，其南、北界限除根据闽、台两岸地形特点外，还基于海底地形、地质、地貌、地震以及闽江等入海泥砂等综合特点进行划界。南界：台湾南端猫鼻头（屏东县南端）至广东南澳岛（属汕头市南澳县）。北界：台湾北端富贵角（新北市北端）至福建连江北茭（黄歧半岛北茭咀、连江县东北端苔菉镇北茭村）。
        </div>
      </div>
    </div>
    <script>
      window.onload = () => {
        const addWaterMarker = (dom, str, width = 200, height = 200) => {
          // 绘制水印
          const can = document.createElement("canvas");
          can.width = width;
          can.height = height;
          const canv = can.getContext("2d");
          // 设置中心点，将坐标系移动到中心点
          canv.translate(width / 2, height / 2);
          // 旋转45°
          canv.rotate(-Math.PI / 4);
          // 绘制文字
          canv.fillStyle = "rgba(253, 121, 168, 0.3)";
          canv.textAlign = "center";
          canv.textBaseline = "middle";
          canv.font = "bold 20px Arial";
          canv.fillText(str, 0, 0);
          dom.style.backgroundImage = `url(${can.toDataURL("image/png")})`;
        };
        const dom = document.getElementById("content");
        addWaterMarker(dom, "添加水印", 300, 400);
      };
    </script>
  </body>
</html>