微信小程序例子——使用画布组件绘制一个半径为50px的圆

1、效果展示

2、关键代码

index.wxml

index.js

Page({
  onReady:function(){
    // 页面渲染完成
    var cxt_arc=wx.createContext();//创建并返回绘图上下文context对象。
    cxt_arc.beginPath();//开始一个新的路径
    cxt_arc.arc(100,50,50,0,2*Math.PI,true);//设置一个原点(100,50)，半径为为50的圆的路径到当前路径
    cxt_arc.stroke();//对当前路径进行描边
    cxt_arc.closePath();//关闭当前路径
    wx.drawCanvas({
      canvasId:'canvasArc',//画布标识，对应的cavas-id
      actions:cxt_arc.getActions()//导出context绘制的直线并显示到页面
    })
  }
})

3、源代码获取方式

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