The two watermarking effects are shown as follows:

Principle analysis:

  • Figure 1 Twill: Create a canvas as big as the page, roughly covered with watermarked text according to the page size and tilt Angle, and finally converted to a picture as the background
  • Figure 2 Slant class: Turn the text into a picture after slant, and then set the background picture repeat to fill the whole page

Code analysis:

Here I will only briefly analyze the graph and twill class. In fact, both methods are relatively simple and do not need a strong canvas foundation, just need a general understanding of the line, and directly to the complete code

  • FIG. 1
<! DOCTYPE html> <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .water {
      width: 100vw;
      height: 2000px;
      position: absolute;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
    }
    .content {
      width: 800px;
      height: 2000px;
      margin-left: auto;
      margin-right: auto;
      background: cadetblue;
      overflow: hidden;
      
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
  <div class="content">
    <div class="water"></div>
  </div>
  
  <script>
    functionAddWaterMarker (STR) {var cpyName = STR;if(str.length > 16) { cpyName = str.substring(0, 16); Var can = document.createElement('canvas'); Var report = $('.content'[0] // Add canvas element to content report.appendChild(can); Can.width = 800; // Set the canvas page width. The value is 800 because the size of our watermark file is fixed. / / get the entire body height can. Height = document. Body. OffsetHeight; // Hide the canvas element can.style.display ='none';
      can.style.zIndex = '999'Var cans = can.getContext('2d'); // Set the text Angle to -25 degrees and the style cans. Rotate (-25 * math.pi / 180); cans.font ="800 30px Microsoft JhengHei";
      cans.fillStyle = "# 000";
      cans.textAlign = 'center';
      cans.textBaseline = 'Middle'; // Dynamically change the font sizeif(cans.measureText(cpyName).width > 180) {
        var size = 180 / cpyName.length
        cans.font = '800' + size +'px '+ ' Microsoft JhengHei'} /* Double traversal, when the width is less than the page width, when the height is less than the page height, here can be appropriately written large, the purpose is to make the watermark text covered */for(letI = (0.5). The document body. OffsetHeight * * - 1; i<800; i+=160) {for(letj = 0; J < document. Body. OffsetHeight * 1.5; J + = 60) {/ / filler words, distance between x and y distance as cans. FillText (cpyName, I, j)}} / / canvas into picture and set as the background report. The style.css. BackgroundImage ="url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker('Test watermark');
  </script>
</body>

</html>
Copy the code
  • Figure 2
<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .water {
      width: 100vw;
      height: 2000px;
      position: absolute;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
    }
    .content {
      width: 800px;
      height: 2000px;
      margin-left: auto;
      margin-right: auto;
      background: cadetblue;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="content">
      <div class="water"></div>
    </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // Add watermark methodfunction addWaterMarker(str) {
      var cpyName = str;
      if (str.length > 16) {
        cpyName = str.substring(0, 16);
      }
      var can = document.createElement('canvas');
      var report = $('.content') [0]; report.appendChild(can); can.width = 180; can.height = 110; can.style.display ='none';
      can.style.zIndex = '999'

      var cans = can.getContext('2d');
      cans.rotate(-25 * Math.PI / 180);
      cans.font = "800 30px Microsoft JhengHei";
      cans.fillStyle = "# 000";
      cans.textAlign = 'center';
      cans.textBaseline = 'Middle';
      if(cans.measureText(cpyName).width > 180) {
        var size = 180 / cpyName.length
        cans.font = '800' + size +'px '+ ' Microsoft JhengHei'
      }
      cans.fillText(cpyName, 60, 100);
      report.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker('Test watermark');
  </script>
</body>
</html>
Copy the code