微信小程序Canvas画布绘制图片、文字、矩形、（椭）圆、直线

获取CanvasRenderingContext2D 对象

.js

onReady() {const query = wx.createSelectorQuery()query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {const canvas = res[0].nodeconst ctx = canvas.getContext('2d')canvas.width = res[0].width * dprcanvas.height = res[0].height * dprthis.setData({canvas: canvasctx: ctx})})
},

绘制图片

.js

draw_image(){var canvas = this.data.canvas //canvas为获取的canvas对象var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象var img = canvas.createImage()img.src = 'http://'img.onload = () =>{ctx.drawImage(img,0,0,200,200) //参数1：图片对象，参数2：绘制位置x，参数3：绘制位置y，参数4：图片宽度