大家好，我，阿盟！

小程序中存在很多生成图片的需求，比如分享海报、名片生产、商品详情、自定义贺卡等等

目前主流的方案主要有两种：服务端合成、客户端合成

而采用客户端合成（Canvas 绘制）相对于服务端合成在性能和响应速度方面是具有一些优势的，尤其是在后端不配合的场景下😄

接下来我们就来简单的介绍一下怎么使用canvas来生成一张图片

1.  创建 Canvas 组件：首先，在你的小程序页面的 .wxml 文件中添加一个 <canvas> 组件，指定它的canvas-id，例如：

<canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>

2.  在 JavaScript 中获取 Canvas 上下文：在你的小程序页面的 .js 文件中，使用 wx.createCanvasContext 方法获取 Canvas 2D 绘图上下文：

	const ctx = wx.createCanvasContext('myCanvas');

3.  创建绘图逻辑：使用 ctx 上下文对象，你可以使用 Canvas 2D 绘图 API 来创建你的图形。例如，如果你要绘制文本，可以使用 fillText() 方法，如果你要绘制图片，可以使用 drawImage() 方法，等等。以下是一个简单的例子，绘制一段文本：

	ctx.setFontSize(14); // 设置字体大小
ctx.fillText("Hello, World!", 50, 50); // 绘制文本

4.  你可以根据你的 JSON 数据来设计绘图逻辑，动态地创建图形。

a.  假设你有以下json数据

	{
  "title": "动态生成图形示例",
  "subtitle": "使用Canvas API",
  "shapes": [
    { "type": "circle", "x": 100, "y": 100, "radius": 50 },
    { "type": "rect", "x": 200, "y": 100, "width": 80, "height": 60 },
    { "type": "text", "content": "Hello, Canvas!", "x": 150, "y": 200 }
  ]
}

b.  可以使用以下 Canvas API 来根据这个 JSON 数据进行绘图

	for (const shape of jsonData.shapes) {
  if (shape.type === "circle") {
    ctx.beginPath();
    ctx.arc(shape.x, shape.y, shape.radius, 0, Math.PI * 2);
    ctx.setFillStyle("#FF0000");
    ctx.fill();
  } else if (shape.type === "rect") {
    ctx.setFillStyle("#00FF00");
    ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
  } else if (shape.type === "text") {
    ctx.setFontSize(16);
    ctx.setFillStyle("#000");
    ctx.fillText(shape.content, shape.x, shape.y);
  }
}

5.  保存 Canvas 为图片：一旦完成了绘图，使用 ctx.draw() 方法来将绘制的内容保存到 Canvas 上。参数 false 表示不清空 Canvas 的内容，以便后续保存。

	ctx.draw(false, () => {
  wx.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success: function (res) {
      // res.tempFilePath 包含生成的图片文件路径
      console.log(res.tempFilePath);
    }
  });
});

以上，就是我们如何通过canvas在小程序生成图片的一些步骤了，这里只是一些简单的介绍，如果设计到一些复杂的逻辑交互，我们也可以借鉴一下知名的开源项目：

GitHub - Kujiale-Mobile/Painter: 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片