現在(zài)小程序生成海報是(shì)很常見的(de)，例如生成打卡海報、生成文案、生成宣傳圖、生成推廣圖等，都是(shì)少不(bù)了(le／liǎo)一個(gè)技術，就(jiù)是(shì)圖片繪制，有些是(shì)通過前端Canvas繪制，有些是(shì)通過後端繪制，當然前端Canvas繪制是(shì)比較節省成本的(de)，效率也(yě)高，也(yě)相對門檻低，技術也(yě)容易實現，後端是(shì)會消耗服務器資源，增加服務器壓力。

index.wxml

<!-- 創建一個(gè)Canvas組件 -->
<canvas canvas-id='MyCanvas' class='MyCanvas' style="width:{{screenWidth}}px;height:{{screenHeight}}px;"></canvas>

index.js

// pages/test/test.js
Page({

  /**
   * 頁面的(de)初始數據
   */
  data: {

  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function () {
    let that = this
    wx.getSystemInfo({
      success: (res) => {
        let canvasWidth = (res.screenWidth - 20)*2 // 設置canvas寬度，屏幕寬度-20的(de)2倍
        let canvasHeight = (res.screenHeight - 500)*2 // 設置canvas高度，屏幕高度-500的(de)2倍

        // 定義畫布對象
        const MyCanvas = wx.createCanvasContext('MyCanvas') 

        // 在(zài)畫布上(shàng)繪制文本
        MyCanvas.setFontSize(20) // 文本大(dà)小
        MyCanvas.fillText('TANKING', 20, 30) // 文本、x軸位置、y軸位置

        // 在(zài)畫布上(shàng)繪制矩形
        MyCanvas.rect(20, 40, 100, 50)// x軸位置、y軸位置、寬度、高度

        // 在(zài)畫布上(shàng)繪制圓形
        // 創建一個(gè)圓可以(yǐ)指定起始弧度爲(wéi / wèi)0，終止弧度爲(wéi / wèi)2 * Math.PI
        MyCanvas.arc(70, 150, 50, 0, 2 * Math.PI) // 圓心的(de)x坐标、圓心的(de)y坐标、圓的(de)半徑、起始弧度（在(zài)3點鍾方向）、終止弧度
        
        MyCanvas.setFillStyle('#f00') // 填充背景顔色
        MyCanvas.fill() // 用fill方法真正的(de)畫到(dào)canvas中
        MyCanvas.draw() //繪制

        that.setData({
          canvasWidth:canvasWidth,
          canvasHeight:canvasHeight,
          screenWidth:canvasWidth/2,
          screenHeight:canvasHeight/2
        })
      },
    })
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上(shàng)拉觸底事件的(de)處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上(shàng)角分享
   */
  onShareAppMessage: function () {

  }
})

index.wxss

.MyCanvas{
  border: 1px solid #333;
  margin:0 auto;
}

繪制流程

1、引入Canvas組件，設置好Canvas的(de)寬高

2、定義Canvas：wx.createCanvasContext

3、創建圖形（直線、弧線路徑、矩形等）

4、生成圖像

5、下載圖像

官方文檔

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html