小程序canvas2d绘制页面并且生成图片

要在小程序中使用 Canvas2D 绘制页面并生成图片，可以按照以下步骤进行：

1. 在 `wxml` 文件中添加 `canvas` 标签，设置宽高和 `canvas-id`。

<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>

2. 在 `js` 文件中获取 `canvas` 上下文对象，并进行绘制。绘制完成后可以通过 `canvasToTempFilePath` 方法将画布转换为临时图片路径。

// 获取canvas上下文对象
const ctx = wx.createCanvasContext('myCanvas', this);

// 绘制图形
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 100, 100);
ctx.setFillStyle('#000000');
ctx.setFontSize(20);
ctx.fillText('Hello, World!', 10, 50);

// 将画布转换为临时图片路径
ctx.draw(false, () => {
  wx.canvasToTempFilePath({
    canvasId: 'myCanvas',
    success: (res) => {
      console.log(res.tempFilePath);
    },
    fail: (res) => {
      console.log(res.errMsg);
    }
  }, this);
});

3. 生成的临时图片路径可以通过 `Image` 组件显示在页面中。

<image src="{{imageUrl}}" mode="aspectFill" style="width: 100%; height: 100%;"></image>

完整代码示例：

// index.wxml
<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>
<image src="{{imageUrl}}" mode="aspectFill" style="width: 100%; height: 100%;"></image>

// index.js
Page({
  data: {
    imageUrl: ''
  },
  onLoad() {
    const ctx = wx.createCanvasContext('myCanvas', this);
    ctx.setFillStyle('#ffffff');
    ctx.fillRect(0, 0, 100, 100);
    ctx.setFillStyle('#000000');
    ctx.setFontSize(20);
    ctx.fillText('Hello, World!', 10, 50);
    ctx.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
          this.setData({
            imageUrl: res.tempFilePath
          });
        },
        fail: (res) => {
          console.log(res.errMsg);
        }
      }, this);
    });
  }
});