微信小程序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：图片宽度，参数5：图片高度
    }
}

绘制Text

.js

draw_text(){
    var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
    ctx.font = 'italic bold 30px Arial' //设置文字样式，包含斜体、加粗、字号、字体等
    ctx.fillStyle = 'red' //设置文字颜色
    ctx.fillText('绘制文字',0,100,1000) //参数1：绘制文本，参数2：绘制位置x，参数3：绘制位置y，参数4（可选）：绘制文本的最大宽度
}

绘制矩形

.js

//绘制矩形边框
draw_rect_stroke(){
    ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
    ctx.strokeStyle = 'red' //边框颜色
    ctx.lineWidth = 5 //边框宽度
    ctx.strokeRect(0,0,100,100) //参数1：绘制位置x，参数2：绘制位置y，参数3：矩形宽度，参数4：矩形高度
    
}

 //绘制矩形填充
draw_rect_fill(){
    ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
    ctx.fillStyle = 'red' //填充颜色
    ctx.fillRect(0,0,100,100) //参数1：绘制位置x，参数2：绘制位置y，参数3：矩形宽度，参数4：矩形高度
}

绘制（椭）圆

.js

//绘制椭圆边框
draw_ellipse_stroke(){
    var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
    ctx.lineWidth=100
    ctx.strokeStyle="black"
    ctx.beginPath()
    ctx.ellipse(80,80,50,50,0,0,Math.PI*2)
    /*
    参数1：圆心位置x
    参数2：圆心位置y
    参数3：长轴长度
    参数4：短轴长度
    参数5：旋转弧度
    参数6：开始弧度
    参数7：结束弧度
    长轴和短轴相等，开始弧度=0，结束弧度=Math.PI*2，绘制图形为圆形
    */
    ctx.stroke()
}

//绘制椭圆填充
draw_ellipse_fill(){
    var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
    ctx.fillStyle="black"
    ctx.beginPath()
    ctx.ellipse(80,80,50,50,0,0,Math.PI*2)
    /*
    参数1：圆心位置x
    参数2：圆心位置y
    参数3：长轴长度
    参数4：短轴长度
    参数5：旋转弧度
    参数6：开始弧度
    参数7：结束弧度
    长轴和短轴相等，开始弧度=0，结束弧度=Math.PI*2，绘制图形为圆形
    */
    ctx.fill()
}

绘制直线 

.js

draw_line(){
    var ctx = this.data.ctx //ctx为获取的CanvasRenderingContext2D 对象
    ctx.strokeStyle = "black" //直线颜色
    ctx.lineWidth = 100 //直线宽度
    ctx.beginPath()
    ctx.moveTo(50,10) //参数1：开始位置x，参数2：开始位置y
    ctx.lineTo(50,110) //参数1：结束位置x，参数2：结束位置y
    ctx.closePath()
    ctx.stroke()
}

更多内容请关注博主，微信小程序功能定制或咨询请私信博主。