微信小程序 canvas2d 绘制海报

微信小程序通过 Canvas 2D 绘制海报可以用于商品展示、广告宣传等场景。下面介绍一下实现流程：

1. 页面结构

在页面中添加一个 Canvas 标签，设置 id 和宽高：

<canvas id="poster" style="width: 750rpx; height: 1334rpx;"></canvas>

2. 获取 Canvas 上下文

在页面的 onLoad 函数中获取 Canvas 上下文：

let ctx = wx.createCanvasContext('poster');

3. 绘制背景

使用 Canvas 2D 绘制背景，可以使用 fillRect 方法绘制一个填充矩形：

ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 750, 1334);

4. 绘制图片

使用 drawImage 方法绘制图片，需要先将图片下载到本地：

wx.getImageInfo({
  src: 'https://example.com/image.png',
  success: function(res) {
    ctx.drawImage(res.path, 0, 0, 750, 500);
  }
});

5. 绘制文本

使用 fillText 或者 strokeText 方法绘制文本，需要设置字体样式和对齐方式：

ctx.setFontSize(32);
ctx.setTextAlign('center');
ctx.fillText('这是一段文本', 375, 600);

6. 保存海报

使用 Canvas 2D 的 toTempFilePath 方法将绘制的海报保存到本地：

ctx.draw(false, function() {
  wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 750,
    height: 1334,
    canvasId: 'poster',
    success: function(res) {
      console.log(res.tempFilePath);
    }
  });
});

完整代码：

Page({
  onLoad: function() {
    let ctx = wx.createCanvasContext('poster');

    ctx.setFillStyle('#ffffff');
    ctx.fillRect(0, 0, 750, 1334);

    wx.getImageInfo({
      src: 'https://example.com/image.png',
      success: function(res) {
        ctx.drawImage(res.path, 0, 0, 750, 500);
      }
    });

    ctx.setFontSize(32);
    ctx.setTextAlign('center');
    ctx.fillText('这是一段文本', 375, 600);

    ctx.draw(false, function() {
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 750,
        height: 1334,
        canvasId: 'poster',
        success: function(res) {
          console.log(res.tempFilePath);
        }
      });
    });
  }
});