微信小程序中使用canvas

基于最新版，支持Canvas 2D 接口的canvas使用示例

在官方文档中标明若要使用最新的接口，需要在微信小程序页面的wxml文件内指定canvsa组件的type属性为’2d’

<canvas style="width:300px; height:240px;" id="canvas" type="2d"></canvas>

定义好canvas组件后，新建一个SelectorQuery对象，用以查询给定id的canvas组件，使用wx.createSelectorQuery()

/*
* query的类型为SelectorQuery 
* 可以使用 in() select() selectAll() selectViewport() exec() 方法
* 其中exec()是执行所有查询请求的必用步骤，查询的结果返回在回调函数的第一个参数
**/ 
const query = wx.createSelectorQuery()

/*
* node的类型为NodesRef个人推测使SelectorQuery的子类，其中可以定义各种查询条件
* 可用方法有 fields() boundingClientRect() scrollOffset() context() node()
* 其中node()方法用于获取Node节点实例，先只支持Canvas节点的获取
* 若需要查询的组件包含在自定义组件内，或需要查询自定义组件，则需要使用in(this)方法
**/  
const node = query.select('#canvas').node()

//最后执行exec()方法，并将回调函数传入方法中
node.exec(res=> {
	const canvas = res[0].node
	const ctx = canvas.getContext('2d')
	ctx.fillStyle = "#0000ff"
    ctx.fillRect(20,20,150,100)
})

//上述代码也可写成以下样式
wx.createSelectorQuery()
  .select('#canvas')
  .node()
  .exec(res=> {
	const canvas = res[0].node
	const ctx = canvas.getContext('2d')
	ctx.fillStyle = "#0000ff"
    ctx.fillRect(20,20,150,100)
  })

在exec()方法的回调函数内，获取到canvas节点对象后需要使用getContext(‘2d’)来获取canvas的上下文对象，对于参考手册中的所有方法和属性都可以使用，建议自己查看。