小程序组件--canvas画布

 canvas有一个重要的属性canvas-id, 代表的是哪一张画布

canvas 标签默认宽度300px、高度225px, 同一页面中的canvas-id不要重复

<canvas canvas-id='first' class='canvas'></canvas>

默认画布不是全屏的, 可以在wxss中设置(page的宽高)

page {
  width: 100%;
  height:100%
}
.canvas {                    /*画布的背景色和宽高*/
  background-color:#ccc;    
  width : 100%;           
  height : 100%
}

在页面加载时画一个矩形: 

Page({
  data: {},

  onLoad :function() {
    // 创建画布上下文 (就像audio一样, 先根据id获得其上下文)
    var context = wx.createCanvasContext("first", this);
    // 设置描边的样式
    context.setStrokeStyle("#FF33FF");
    // 矩形位置和大小
    context.rect(0,0,100,100);
    // 绘制行为 (决定如何绘制)
    context.stroke();

    // 执行
    wx.drawCanvas({
      canvasId: 'first',              // 表示在指定的这一张画布上执行画图
      actions: context.getAct