【HTML】使用canvas添加水印

  • 效果

【HTML】使用canvas添加水印_第1张图片

  • 代码
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>

你可能感兴趣的:(html,javascript,前端)