最近在研究小程式生成圖片分享功能，感覺那些能夠自動生成圖片的小程式特別炫酷，特別牛X。但是當你仔細學習下canvas時，發現也就那麼回事~

.wxml

<canvas canvas-id="shareCanvas" style="width:300px;height:600px"></canvas>

.js

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    const ctx = wx.createCanvasContext('shareCanvas')
    ctx.drawImage('../../images/001.jpg', 0, 0, 300, 600);//繪製背景圖
    // 繪製文字
    ctx.setTextAlign('center')    // 文字居中
    ctx.setFillStyle('#000000')  // 文字顏色：黑色
    ctx.setFontSize(22)         // 文字字號：22px
    ctx.fillText('作者：csdn部落格', 150, 300);
    ctx.stroke();//繪製一條路徑，形狀是紅色的字母 L：  這裡可以不要

    //繪製小程式碼
    ctx.drawImage('../../images/000.jpg', 10, 490, 100, 100)

    ctx.draw();
    
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
    
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
    
  }
})