1、效果展示

2、關鍵程式碼

index.wxml

empty

index.js

Page({
  onReady:function(e){
    var context = wx.createContext();//建立並返回繪圖上下文context物件。
    context.beginPath();//開始一個新的路徑
    context.moveTo(30,40);//路徑的起點
    context.lineTo(260,40);//路徑的終點
    context.stroke();//對當前路徑進行描邊
    context.closePath();//關閉當前路徑
    wx.drawCanvas({//
      canvasId:'canvasLine',//畫布標識，對應的cavas-id
      actions:context.getActions()//匯出context繪製的直線並顯示到頁面
    });
  }
})
 

3、原始碼獲取方式

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