返回

前端快速制作canvas水印效果，简单粗暴且有效

前端

在前端开发中，有时我们为了保护页面内容或防止图片被盗用，会给页面或图片添加水印。canvas水印是一种常见的做法，它利用canvas元素来绘制水印。

canvas水印有两种常见的类型：斜纹类和倾斜类。

斜纹类水印是将文字或图案以一定角度倾斜，然后重复填充整个页面。倾斜类水印是将文字或图案倾斜后转化为图片，然后设置背景图片repeat填充整个页面。

本文将介绍如何使用canvas快速制作这两种水印效果，并附有完整示例代码。

斜纹类水印

  1. 创建一个和页面一样大的画布
  2. 根据页面大小以及倾斜角度大致铺满水印文字
  3. 最后转化为一张图片设为背景

倾斜类水印

  1. 将文字倾斜后转化为图片
  2. 然后设置背景图片repeat填充整个页面

下面是两种水印效果的示例代码：

斜纹类水印：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="100%" height="100%"></canvas>

  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 获取页面大小
    var pageWidth = document.documentElement.clientWidth;
    var pageHeight = document.documentElement.clientHeight;

    // 设置canvas大小
    canvas.width = pageWidth;
    canvas.height = pageHeight;

    // 设置水印文字
    var watermarkText = '水印文字';

    // 设置水印文字大小
    ctx.font = '20px Arial';

    // 设置水印文字颜色
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

    // 设置水印文字倾斜角度
    ctx.rotate(-15 * Math.PI / 180);

    // 计算水印文字的间距
    var textWidth = ctx.measureText(watermarkText).width;
    var textHeight = 20;
    var spacingX = 100;
    var spacingY = 100;

    // 绘制水印文字
    for (var x = 0; x < pageWidth; x += spacingX) {
      for (var y = 0; y < pageHeight; y += spacingY) {
        ctx.fillText(watermarkText, x, y);
      }
    }

    // 将canvas转化为图片
    var imageData = canvas.toDataURL('image/png');

    // 设置图片为背景
    document.body.style.backgroundImage = `url(${imageData})`;
  </script>
</body>
</html>

倾斜类水印：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="100%" height="100%"></canvas>

  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 设置水印文字
    var watermarkText = '水印文字';

    // 设置水印文字大小
    ctx.font = '20px Arial';

    // 设置水印文字颜色
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

    // 将文字倾斜
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(-15 * Math.PI / 180);
    ctx.translate(-canvas.width / 2, -canvas.height / 2);

    // 将文字绘制到canvas上
    ctx.fillText(watermarkText, 0, 0);

    // 将canvas转化为图片
    var imageData = canvas.toDataURL('image/png');

    // 设置图片为背景
    document.body.style.backgroundImage = `url(${imageData})`;
    document.body.style.backgroundRepeat = 'repeat';
  </script>
</body>
</html>

以上就是在前端快速制作canvas水印效果的方法，大家可以根据自己的需要选择合适的水印类型。