【微信小程序】Canvas 水印图片的制作 内附代码和详解

受朋友委托，帮其做一个具有水印的身份证图，时间比较紧张，代码逻辑可能不是最简便的，但是效果不错，有更好的想法的码友可以给我分享一下心得，不胜感激！

先上效果图：

不同的图片只需要更换不同的图片路径即可，canvas画布的大小受项目影响自行调整。

下边上代码：

wxml：

<canvas canvas-id='myCanvas' style='width:500px;height:500px;background-color:black;'></canvas>

放js之前先放一张思路图：

js：

// pages/canvas/canvasDemo/canvasDemo1/canvasDemo1.js
var ctx = wx.createCanvasContext("myCanvas");
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    ctx.drawImage("/images/cat.jpg",0,0,375,375)//在画布上绘入图片，参数含义移步手册。
    ctx.rotate(45 * Math.PI / 180);//设置文字的旋转角度，角度为45°；

    //对斜对角线以左部分进行文字的填充
    for (let j = 1; j < 10; j++) { //用for循环达到重复输出文字的效果，这个for循环代表纵向循环
      ctx.beginPath();
      ctx.setFontSize(30);
      ctx.setFillStyle("rgba(255,255,255,.5)");

      ctx.fillText("水印", 0, 50 * j);
      for (let i = 1; i < 10; i++) {//这个for循环代表横向循环，
        ctx.beginPath();
        ctx.setFontSize(30);
        ctx.setFillStyle("rgba(255,255,255,.5)");
        ctx.fillText("水印", 80 * i, 50 * j);
      }
    }//两个for循环的配合，使得文字充满斜对角线的左下部分

    //对斜对角线以右部分进行文字的填充逻辑同上
    for (let j = 0; j < 10; j++) {
      ctx.beginPath();
      ctx.setFontSize(30);
      ctx.setFillStyle("rgba(255,255,255,.5)");

      ctx.fillText("水印", 0, -50 * j);
      for (let i = 1; i < 10; i++) {
        ctx.beginPath();
        ctx.setFontSize(30);
        ctx.setFillStyle("rgba(255,255,255,.5)");
        ctx.fillText("水印", 80 * i, -50 * j);
      }
    }
    ctx.draw();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

代码简单暴力模拟出水印效果，如果有更好的想法，欢迎来互相交流~！