页面中点击红色按钮,会触发绘制操作,点一次只绘制了文字,点第二次才会出现图片,有时间点多次图片才会全部出现.
请大佬帮忙看看,代码能直接用,求大佬帮忙!!!!
html
<view>
    <canvas type="2d" id="canvas" class="canvas"></canvas>
</view>
<view bind:tap="saveImg" style="width: 100rpx;height:100rpx;background-color: red;"></view>
css
.canvas {
    width: 600rpx;
    height: 1000rpx;
}  
js
var app = getApp();
Page({


    /**
     * 页面的初始数据
     */
    data: {
        canvas: null,
        giveInfo: null,
        zanIconUrl: null,
        head1Url: null,
        head2Url: null,
        head3Url: null,
        head4Url: null,
        head5Url: null,
        xcxmUrl: null,
        petPicUrl: null
    },
    onLoad(options) {
        var that = this;
        this.setData({
            //上一页传递的数据
            giveInfo: JSON.parse(options.giveInfo)
        })
        this.setData({
            //网络图片,但是在前置页面已经全部通过 wx.getImageInfo 加载到了内存中 
                      //https://pet.ycho.cc/media/static/head1.png 可以全部替换这个用
            zanIconUrl: app.globalData.zanIconUrl,
            head1Url: app.globalData.head1Url,
            head2Url: app.globalData.head2Url,
            head3Url: app.globalData.head3Url,
            head4Url: app.globalData.head4Url,
            head5Url: app.globalData.head5Url,
            xcxmUrl: app.globalData.xcxmUrl,
            petPicUrl: app.globalData.petPicUrl
        })


        var that = this;
        var query = wx.createSelectorQuery();
        query.select('#canvas')
            .fields({ node: true, size: true },
                function (res) {
                    var canvas = res.node;
                    var ctx = canvas.getContext('2d');
                    //兼容尺寸
                    var sys = wx.getSystemInfoSync();
                    var dpr = sys.pixelRatio;
                    canvas.width = res.width * dpr;
                    canvas.height = res.height * dpr;
                    ctx.scale(dpr, dpr);
                    that.setData({
                        canvas: canvas
                    })
                })
            .exec()
    },
    onShow() {
    },
    onReady() {


    },


    //点击绘制画布
    saveImg() {
        var that = this;
        app.vibrateShort();
        var canvas = this.data.canvas;
        var ctx = canvas.getContext('2d');
        //开始绘制
        //背景颜色
        ctx.fillStyle = '#FFFFFF';
        //整体大小  
        ctx.fillRect(0, 0, 300, 500);
        // 头像
        var petImg = canvas.createImage();
        petImg.src = that.data.head1Url;
        ctx.drawImage(petImg, 10, 20, 40, 40);
        //昵称 
        ctx.fillStyle = '#8187A6';
        ctx.font = 'bold 16px sans-serif';
        ctx.fillText(that.data.giveInfo.petName, 60, 40, 200);
        //标题    
        ctx.fillStyle = '#000000';
        ctx.fillText('快来益宠领养我吧', 60, 65);
        //宠物照片
        var petImg = canvas.createImage();
        petImg.src = that.data.petPicUrl;


        ctx.drawImage(petImg, 60, 80, 200, 250);


        //时间
        ctx.fillStyle = '#9195A3';
        ctx.font = '12px sans-serif';
        ctx.fillText('刚刚', 60, 350);
        //功能 
        ctx.fillStyle = '#F7F7F7';
        ctx.fillRect(250, 335, 40, 20);
        //圆圈
        ctx.fillStyle = '#5E678F';
        ctx.arc(265, 345, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillStyle = '#5E678F';
        ctx.arc(275, 345, 3, 0, 2 * Math.PI);
        ctx.fill();
        //点赞
        ctx.fillStyle = '#F7F7F7';
        ctx.fillRect(60, 370, 230, 40);


        var zanImg1 = canvas.createImage();
        zanImg1.src = that.data.zanIconUrl;


        ctx.drawImage(zanImg1, 65, 385, 15, 15);



        var headImg1 = canvas.createImage();
        headImg1.src = that.data.head1Url;


        ctx.drawImage(headImg1, 90, 375, 30, 30);



        var headImg2 = canvas.createImage();
        headImg2.src = that.data.head2Url;


        ctx.drawImage(headImg2, 130, 375, 30, 30);



        var headImg3 = canvas.createImage();
        headImg3.src = that.data.head3Url;


        ctx.drawImage(headImg3, 170, 375, 30, 30);



        var headImg4 = canvas.createImage();
        headImg4.src = that.data.head4Url;


        ctx.drawImage(headImg4, 210, 375, 30, 30);



        var headImg5 = canvas.createImage();
        headImg5.src = that.data.head5Url;


        ctx.drawImage(headImg5, 250, 375, 30, 30);



        //二维码标题 
        ctx.fillStyle = '#000000';
        ctx.font = 'bold 13px sans-serif';
        ctx.fillText('长按识别二维码领养TA', 60, 460);


        //二维码
        var ewmImg = canvas.createImage();
        ewmImg.src = that.data.xcxmUrl;


        ctx.drawImage(ewmImg, 200, 415, 80, 80);



        // wx.canvasToTempFilePath({
        //     canvas: canvas,
        //     fileType: 'jpg',
        //     success(r) {
        //         wx.saveImageToPhotosAlbum({
        //             filePath: r.tempFilePath,
        //             success(r) {
        //                 console.log(r)
        //             },
        //             fail(r) {
        //                 app.toast('保存失败')
        //             }
        //         })
        //     }, fail(r) {
        //         app.toast('生成失败')
        //     }
        // });
    }
})