《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（6）: https://developer.aliyun.com/article/1227991?groupCode=tech_library
最后，看一个简单的案例，代码清单 2-55 即为 wxml 文件中的代码。
代码清单 2-55
<canvastype="2d"id="myCanvas"></canvas>
代码清单 2-56 即为 wxss 文件中的代码。
代码清单 2-56
canvas{ width:100%; height:800rpx; border:1pxsolidred; }
代码清单 2-57 即为 JavaScript 文件中的代码。运行结果如图 2-48 所示。
代码清单 2-57
Page({ onReady() { constquery=wx.createSelectorQuery() query.select('#myCanvas') .fields({ node: true, size: true }) .exec((res) => { constcanvas=res[0].nodeconstctx=canvas.getContext('2d') constdpr=wx.getSystemInfoSync().pixelRatiocanvas.width=res[0].width*dprcanvas.height=res[0].height*dprctx.scale(dpr, dpr) //画圆ctx.beginPath() ctx.arc(150, 50, 10, 0, 2*Math.PI) ctx.fillStyle="blue"ctx.fill() ctx.closePath() //画直线ctx.beginPath() ctx.fillStyle="red"ctx.moveTo(50, 130) ctx.lineTo(250, 130) ctx.stroke() //画矩形ctx.beginPath() ctx.fillStyle="orange"ctx.fillRect(100, 200, 100, 100) ctx.closePath() }) } })
接下来，解释上述代码中的相关方法。
从基础库 2.9.0 起，微信小程序支持一套新的 Canvas 2D 接口， 需要指定 type 属性，我们应通过 createSelectorQuery()方法返回一个 SelectorQuery 对象实例。
SelectorQuery.select()方法会在当前页面下选择第一个匹配选择 器（selector）的节点，并返回一个 NodesRef 对象实例，用于获取节 点信息。
NodesRef.fields()方法可以获取节点的相关信息，需要获取的字 段应在 fields 中指定，其返回值是 nodesRef 对应的 selectorQuery。 关于 fields 字段的信息，请参考表 2-16。
SelectorQuery.exec()方法会执行所有的请求，并将结果按请求次序构成数组作为回调函数的 第一个参数返回。
