这是微信开发者文档canvas旧版示例代码效果图，运用
wx.createCanvasContext('firstCanvas')
但是已经被弃用了，需要使用新的接口Canvas 2D，下面我们就用新街口改写旧版示例。
wxml代码：
<!--canvas组件--><canvas id="myCanvas" type="2d" style="margin:20rpx;width: 300px; height: 200px;" bindtouchstart="start" bindtouchmove="move" bindtouchend="end"/><!--通过canvas的start move end事件获取画布中的坐标点x y--><view hidden="{{hidden}}">Coordinates: ({{x}}, {{y}})</view>
js逻辑代码：
// pages/canvas/canvas.jsPage({/*** 页面的初始数据*/data: {x: 0,y: 0,hidden: true},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {wx.createSelectorQuery().select('#myCanvas') // 在 WXML 中填入的 id.fields({ node: true, size: true }).exec((res) => {// Canvas 对象const canvas = res[0].node// 渲染上下文const ctx = canvas.getContext('2d')// Canvas 画布的实际绘制宽高const width = res[0].widthconst height = res[0].height// 初始化画布大小const dpr = wx.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)// 清空画布ctx.clearRect(0, 0, width, height)//绘制方形ctx.strokeStyle = "#00ff00";//路径颜色ctx.lineWidth = 5;//路径宽度ctx.rect(0,0,200,200);//方形区域ctx.stroke();//开始绘制方形//绘制圆形//arc(x,y,r,sAngle,eAngle,counterclockwise)绘制圆形// 参数// xNumber圆的x坐标// yNumber圆的y坐标// rNumber圆的半径// sAngleNumber起始弧度，单位弧度（在3点钟方向）// eAngleNumber终止弧度//counterclockwiseBoolean可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。ctx.strokeStyle = "#ff0000";ctx.lineWidth = 2;ctx.moveTo(160,100);//移动至坐标160 100 ctx.beginPath();//开始新路径ctx.arc(100,100,60,0,2*Math.PI,true);ctx.moveTo(140,100);ctx.arc(100,100,40,0,Math.PI,false);ctx.moveTo(85,80);ctx.arc(80,80,5,0,2*Math.PI);ctx.moveTo(125,80)ctx.arc(120,80,5,0,2*Math.PI);ctx.stroke(); })},start: function(e) {this.setData({hidden: false,x: e.touches[0].x,y: e.touches[0].y})},move: function(e) {this.setData({x: e.touches[0].x,y: e.touches[0].y})},end: function(e) {this.setData({hidden: true})}})
