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

获取CanvasRenderingContext2D 对象

.js

onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
    .fields({ node: true, size: true })
    .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        this.setData({
            canvas: canvas
            ctx: 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：图片宽度