var author: “丁小柒”
注:我是第一次寫這種文章，哪里不好的地方還請指出，我會改進的，希望可以給大家帶來幫助
微信的小程序的canvas與js原生的canvas內容十分類似
頁面的設置都是

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

設置canvas的樣式與id
js部分則通過wx.createContext()的方法來創建畫布的前后文，因為小程序目前只有2D，所以不需要來設置2d還是webGL

var con = wx.createContext();

接下來我們就可以進行繪制了，繪制的一般步驟是:

1.先定義繪制樣式 setStrokeStyle=’’ ;或者是setFillStyle=’’;
con.setStrokeStyle("#00ff00");//描邊風格 (stroke是繪制路徑)
con.setFillStyle("#00ff00"); //填充風格
2.設置要繪制的信息，這部分文檔里也有，不做詳細講解，只給添加上注釋
con.setLineWidth(5);//設置線框的寬度
con.rect(0,0,200,200);//繪制矩形，內容分別為
(起點位置的橫坐標 , 起點位置的縱坐標, 矩形的寬, 矩形的高)
context.arc(x,y,r,sAngle,eAngle,true);//繪制圓形

**x    圓的中心的 x 坐標。
  y    圓的中心的 y 坐標。
  r    圓的半徑。**
 sAngle    起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。
  eAngle    結束角，以弧度計。 
 False = 順時針，true = 逆時針。**

3.確定是路徑繪制還是填充繪制
con.stroke(); con.fill();

這時我們會發現保存后界面上仍然什么都沒有，這時，我們就需要調用微信的drawCanvas來將以上要繪制的圖顯示在canvas上
wx.drawCanvas({ canvasId: 'firstCanvas', actions: con.getActions() });
通過canvasId選擇canvas的id來確定canvas，以防創建多張canvas時造成的繪制錯誤,
通過actions來獲取繪圖動作數組，然后我們就可以保存了,這時我們就可以看到效果了

Page({
         onReady: function (e) {
      var con = wx.createContext();
      這里進行繪制，大家都懂哈，上面也講了的

        wx.drawCanvas({       //調用的wx.drawCanvas
       canvasId: 'firstCanvas',
       actions: con.getActions() 
      });
     }
    });

以下是我修改了實例上的代碼的路徑效果與填充效果
路徑效果
填充效果