微信小程序例子——使用画布组件绘制一条长度为230px的水平直线

1、效果展示

2、关键代码

index.wxml

empty

index.js

Page({
  onReady:function(e){
    var context = wx.createContext();//创建并返回绘图上下文context对象。
    context.beginPath();//开始一个新的路径
    context.moveTo(30,40);//路径的起点
    context.lineTo(260,40);//路径的终点
    context.stroke();//对当前路径进行描边
    context.closePath();//关闭当前路径
    wx.drawCanvas({//
      canvasId:'canvasLine',//画布标识，对应的cavas-id
      actions:context.getActions()//导出context绘制的直线并显示到页面
    });
  }
})

3、源代码获取方式

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