微信小程序例子——使用画布组件绘制一个长200px，宽100px的长方形

1、效果展示

2、关键代码

index.wxml

index.js

Page({
  onReady:function(){
    // 页面渲染完成
    var ctxt_rect=wx.createContext();//创建并返回绘图上下文context对象。
    ctxt_rect.beginPath();//开始一个新的路径
    ctxt_rect.rect(10,10,200,100);//添加一个长度为200px、宽度为为100px的矩形路径到当前路径
    ctxt_rect.stroke();//对当前路径进行描边
    ctxt_rect.closePath();//关闭当前路径
    wx.drawCanvas({
      canvasId:'canvasRect',//画布标识，对应的cavas-id
      actions:ctxt_rect.getActions()//导出context绘制的矩形路径并显示到页面
    })
  }
})

3、源代码获取方式

百度云链接：http://pan.baidu.com/s/1i5wOEw9