自己用 canvas 制作简易的水印效果

效果图

js

function waterLine(data = {
    container:'', // 容器元素
    text:'', // 文字内容
    fontSize: 14, // 文字字体大小
    color: '#000000', // 文字眼色
    rotate: 0, // 画布旋转角度
    cWidth: 0, // 画布宽度
    cHeight: 0 // 画布高度
  }) {
    let {container, text, fontSize, color, rotate, cWidth, cHeight} = data;
    let canvas = container;
    canvas.style = `width: ${cWidth}px;height:${cHeight}px;`;
    canvas.width = cWidth;
    canvas.height = cHeight;
    let cxt = canvas.getContext("2d");
    cxt.rotate(rotate * Math.PI/180);
    for(let j = -30; j < 50; j++) {
      for(let i = -30; i < 50; i++) {
        cxt.font = `${fontSize}px PingFangSC-Regular,PingFang SC,sans-serif`;
        cxt.fillStyle = color;
        cxt.fillText(text, i*fontSize*(text.length + Math.floor(text.length/2)) + j*fontSize*Math.ceil(text.length/2), (j + 1) * 40);
      }
    }
  }

  waterLine({container: document.getElementById('myCanvas'), text: '呔，你这厮～', fontSize: 16, color: '#E9EAEC', rotate: 45, cWidth: 1024, cHeight: 2000});

html

<div class="content">
  <div class="list"></div>
  <canvas id="myCanvas" ></canvas>
</div>

css

.content {
  position: relative;
  overflow: hidden;
  background: #F5F6F8;
}
.list {
  width: 100%;
  height: 100vh;
}

#myCanvas {
  width: 100%;
  height: 100%;
  border:1px solid #d3d3d3;
  position: absolute;
  top: 0;
  left: 0;
}