canvasrenderingcontext2d.drawimage(canvas | image image, number sx, number sy, number swidth, number sheight, number dx, number dy, number dwidth, number dheight)

基础库  或更高版本； 若版本较低，建议采取 兼容处理 。

支小宝客户端 支持

安诊儿客户端 支持

主体： 企业支付宝小程序 、 个人支付宝小程序

drawimage(canvas | image image, number dx, number dy)
drawimage(canvas | image image, number dx, number dy, number dwidth, number dheight)
drawimage(canvas | image image, number sx, number sy, number swidth, number sheight, number dx, number dy, number dwidth, number dheight)

canvas | image

要绘制的内容。可以为图片对象，或 canvas 实例。

number dx

图片在画布上被绘制出来的位置的 x 轴坐标。

number dy

图片在画布上被绘制出来的位置的 y 轴坐标。

number dwidth

图片要绘制的宽度。可选，默认为原图片真实宽度。

number dheight

图片要绘制的高度。可选，默认为原图片真实高度。

number sx

矩形截选区域左上角的 x 轴位置。会截选原图片中的一块区域绘制。

number sy

矩形截选区域左上角的 y 轴位置。会截选原图片中的一块区域绘制。

number swidth

矩形截选区域的宽度。会截选原图片中的一块区域绘制。

number sheight

矩形截选区域的高度。会截选原图片中的一块区域绘制。

page({
    oncanvasready2() {
        my.createselectorquery().select('#canvas2').node().exec((res) => {
            const canvas2 = res[0].node
            this.canvas2 = canvas2
        })
    },
    oncanvasready() {
        my.createselectorquery().select('#canvas').node().exec((res) => {
            const canvas = res[0].node
            const ctx = canvas.getcontext('2d')
            this.canvas = canvas
            let img = canvas.createimage()
            img.src = "https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*ouykq5wgy-aaaaaaaaaaaaaadsajaq/original"
            img.onload = function () {
                console.log('load image success')
                // 绘制图片
                ctx.drawimage(img, 0, 0)
            }
        })
    },
    ontap() {
        let ctx2 = this.canvas2.getcontext('2d')
        ctx2.drawimage(this.canvas, 0, 0)   
    }
})

<view>
  
    <view>
        <canvas id="canvas" type="2d" onready="oncanvasready">canvas>
    view>
    <view>
        <canvas id="canvas2" type="2d" onready="oncanvasready2">canvas>
    view>
    <button size="default" type="primary" ontap="ontap">绘制至另一个画布button>
view>

page({
    oncanvasready2() {
        my.createselectorquery().select('#canvas2').node().exec((res) => {
            const canvas2 = res[0].node
            this.canvas2 = canvas2
        })
    },
    oncanvasready() {
        my.createselectorquery().select('#canvas').node().exec((res) => {
            const canvas = res[0].node
            const ctx = canvas.getcontext('2d')
            this.canvas = canvas
            let img = canvas.createimage()
            img.src = "https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*ouykq5wgy-aaaaaaaaaaaaaadsajaq/original"
            img.onload = function () {
                console.log('load image success')
                // 绘制图片
                ctx.drawimage(img, 0, 0)
            }
        })
    },
    ontap() {
        let ctx2 = this.canvas2.getcontext('2d')
        ctx2.drawimage(this.canvas, 0, 0)   
    }
})

<view>
  
    <view>
        <canvas id="canvas" type="2d" onready="oncanvasready">canvas>
    view>
    <view>
        <canvas id="canvas2" type="2d" onready="oncanvasready2">canvas>
    view>
    <button size="default" type="primary" ontap="ontap">绘制至另一个画布button>
view>