前端开发canvas水印迅速制做(附详细编码)

日期:2021-02-26 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

两种水印实际效果如图:

基本原理分析:

  • 图1斜纹类:建立1个和网页页面1样大的画布,依据网页页面尺寸和歪斜角度大概铺满水印文本,最终转换为1张照片设为情况
  • 图2歪斜类:将文本歪斜后转换为照片,随后设定情况照片repeat填充全部网页页面

编码剖析:

这里我只简单剖析图1斜纹类,客观事实上这两种方法都较为简易,不必须非常强的canvas基本,只需大约掌握就行,立即上详细编码吧

图1

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF⑻">
  <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>
    function addWaterMarker(str) {
      // 这里限定了不超出15个字,具体按要求来
      var cpyName = str;
      if (str.length > 16) {
        cpyName = str.substring(0, 16);
      }
      // 建立 canvas 元素
      var can = document.createElement('canvas');
      // 获得 content 元素
      var report = $('.content')[0]
      // 将 canvas 元素加上到 content 中
      report.appendChild(can);
      // 设定 canvas网页页面宽度,这里的 800 是由于我司水印文档尺寸固定不动,可按要求变更
      can.width = 800;
      // 获得全部body高宽比
      can.height = document.body.offsetHeight;
      // 掩藏 canvas 元素
      can.style.display = 'none';
      can.style.zIndex = '999'
      // 获得 canvas 元素专用工具箱
      var cans = can.getContext('2d');
      // 设定文本歪斜角度为 ⑵5 度和款式
      cans.rotate(⑵5 * 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'
      }
      /* 
        双向遍历,
        当 宽度小于网页页面宽度时,
        当 高宽比小于网页页面高宽比时,
        这里的宽高能够适度写大,目地是以便让水印文本铺满
       */
      for(let i = (document.body.offsetHeight*0.5)*⑴; i<800; i+=160) {
        for(let j = 0; j<document.body.offsetHeight*1.5; j+=60) {
          // 填充文本,x 间隔, y 间隔
          cans.fillText(cpyName, i, j)
        }
      }
      // 将 canvas 转换为照片而且设定为情况
      report.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker('检测水印');
  </script>
</body>

</html>

图2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF⑻">
  <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>
    // 加上水印方式
    function 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(⑵5 * 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('检测水印');
  </script>
</body>
</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。