小程序的畫布允許繪制基礎(chǔ)的圖形，如直線、圓等。畫布需要使用 <canvas> 標(biāo)簽，例如，下面的布局代碼使用了 <canvas> 標(biāo)簽定義了一個 300*200 的畫布。

<canvas style="width: 300px; height: 200px;" canvas-id="mycanvas"></canvas>

在 <canvas> 標(biāo)簽中使用了一個重要的屬性 canvas-id ，該屬性用于指定畫布的 ID ，同一個頁面，不能存在兩個或兩個以上相同 ID 的畫布。

我們可以通過下面的 JavaScript 代碼在畫布上繪制一個笑臉。

Page({
  onReady: function (e) {
 
    // 使用 wx.createContext 獲取繪圖上下文 context
    var context = wx.createContext()
 
    context.setStrokeStyle("#0000ff")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff00ff")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
 
    // 調(diào)用 wx.drawCanvas，通過 canvasId 指定在哪張畫布上繪制，通過 actions 指定繪制行為
    wx.drawCanvas({
      canvasId: 'mycanvas',
      actions: context.getActions() // 獲取繪圖動作數(shù)組
    })
  }
})

當(dāng)系統(tǒng)裝載時，會調(diào)用 onReady 函數(shù)，在該函數(shù)中利用 context 繪制相應(yīng)的圖形，最后通過 wx.drawCanvas 方法指定要在哪個畫布上繪制圖像，繪制的效果如圖 1 所示。

圖 1 畫布演示效果

其中 wx.drawCanvas 方法的第二個參數(shù) actions 指定當(dāng)前繪制行為使用到的設(shè)置繪制風(fēng)格的一些函數(shù)，如果將 context.getActions 方法返回的信息輸出到 Console ，會看到如圖 2 所示的日志信息。

圖2  context.getActions方法輸出的日志信息