有关微信小程序的canvas开发

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() 
      });
     }
    });

以下是我修改了实例上的代码的路径效果与填充效果
路径效果
填充效果