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

2024-01-09 17:37:31

获取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：图片宽度

文章来源:https://blog.csdn.net/tl437002770/article/details/135481806
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。