1、效果展示

2、關鍵程式碼

index.wxml

index.js

Page({
  onReady:function(){
    // 頁面渲染完成
    var ctxt_rect=wx.createContext();//建立並返回繪圖上下文context物件。
    ctxt_rect.beginPath();//開始一個新的路徑
    ctxt_rect.rect(10,10,200,100);//新增一個長度為200px、寬度為為100px的矩形路徑到當前路徑
    ctxt_rect.stroke();//對當前路徑進行描邊
    ctxt_rect.closePath();//關閉當前路徑
    wx.drawCanvas({
      canvasId:'canvasRect',//畫布標識，對應的cavas-id
      actions:ctxt_rect.getActions()//匯出context繪製的矩形路徑並顯示到頁面
    })
  }
})

3、原始碼獲取方式

百度雲連結：http://pan.baidu.com/s/1i5wOEw9