收藏
回答

canvas绘制图片第一次绘图不完整,第二次才完整

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 draw 客户端 6.6.7 1.3

头像和二维码第一次点击按钮制作显示图像的时候不显示出来,点击第二次才显示出来


//显示名片预览

that.setData({

showMyImg: true,

});


let ctx = wx.createCanvasContext('shareImg')

let canvasW = 290

let canvasH = 460

let radiusR = 5


//白背景

ctx.beginPath()

ctx.arc(radiusR, radiusR, radiusR, 1 * Math.PI, 1.5 * Math.PI)

ctx.lineTo(canvasW - radiusR, 0)

ctx.arc(canvasW - radiusR, radiusR, radiusR, 1.5 * Math.PI, 0)

ctx.lineTo(canvasW, canvasH - radiusR)

ctx.arc(canvasW - radiusR, canvasH - radiusR, radiusR, 0, 0.5 * Math.PI)

ctx.lineTo(radiusR, canvasH)

ctx.arc(radiusR, canvasH - radiusR, radiusR, 0.5 * Math.PI, 1 * Math.PI)

ctx.closePath()

ctx.setFillStyle('#ffffff')

ctx.fill()


//渐变背景

ctx.beginPath()

ctx.arc(radiusR, radiusR, radiusR, 1 * Math.PI, 1.5 * Math.PI)

ctx.lineTo(canvasW - radiusR, 0)

ctx.arc(canvasW - radiusR, radiusR, radiusR, 1.5 * Math.PI, 0)

ctx.lineTo(canvasW, 200)

ctx.lineTo(0, 200)

ctx.closePath()


let grd = ctx.createLinearGradient(0, 0, canvasW, 0)

grd.addColorStop(0, '#f39800')

grd.addColorStop(1, '#e85b00')

ctx.setFillStyle(grd)

ctx.fill()


// ctx.setGlobalAlpha(0.3)

// ctx.setFillStyle('#ff3300')

// ctx.fillRect(188, 20, 55, 19)

// ctx.fillRect(15, 40, 80, 19)

// ctx.fillRect(200, 88, 80, 19)

// ctx.fillRect(35, 115, 55, 19)

// ctx.setGlobalAlpha(1)


ctx.setFillStyle('#ffffff')

ctx.setFontSize(12)

if(artisans_skill[0]){

ctx.fillText(artisans_skill[0]['name'], 19, 54)

}else{

ctx.fillText('免费使用', 19, 54)

}

if (artisans_skill[1]){

ctx.fillText(artisans_skill[1]['name'], 192, 34)

}else{

ctx.fillText('收录附近师傅', 192, 34)

}

ctx.fillText('预约上门服务', 25, 129)

ctx.fillText('在线宣传', 204, 102)


//添加头像

ctx.beginPath()

ctx.arc(canvasW / 2, 94, 45, 0, 2 * Math.PI)

ctx.setFillStyle('#ffffff')

ctx.fill()

ctx.save()

ctx.beginPath()

ctx.arc(canvasW / 2, 94, 45, 0, 2 * Math.PI)

ctx.setLineWidth(3)

ctx.setStrokeStyle('#ffffff')

ctx.stroke()

ctx.clip()

ctx.drawImage(useImageUrl, canvasW / 2 - 45, 49, 90, 90)

ctx.restore()


ctx.setFillStyle('#ffffff')

ctx.setFontSize(16)

ctx.setTextAlign('center')

ctx.fillText(that.data.username, canvasW/2, 170)


ctx.setFillStyle('#fad699')

ctx.fillRect(0, 200, canvasW, 10)

ctx.setFillStyle('#fdefd9')

ctx.fillRect(0, 210, canvasW, 10)


ctx.setFillStyle('#ff6600')

ctx.setFontSize(18)

ctx.setTextAlign('center')

ctx.fillText('XXXXXXX', canvasW/2, 250)


ctx.setFillStyle('#555555')

ctx.setFontSize(14)

ctx.fillText('扫描二维码就能找到我', canvasW/2, 280)

ctx.fillText('欢迎预约服务', canvasW/2, 300)

ctx.drawImage(QrMiniPath, 102, 320, 85, 85)

ctx.setFillStyle('#777777')

ctx.setFontSize(12)

ctx.fillText('长按识别二维码', canvasW/2, 430)


setTimeout(function(){

ctx.draw(false, function () {

that.saveCanvasImage();

});

},1000)

},


//头像图片暂存

downLoadImg: function() {

const that =this;

wx.getImageInfo({

src: that.data.userInfoAvatar,

success: function (res) {

wx.setStorage({

key: 'userinfoImage',

data: res.path,

});

},

fail:function(res){

wx.showModal({

title: '头像获取失败或未设置',

content: '头像获取失败,请稍后再试。',

showCancel: false,

})

}

}),

useImageUrl = wx.getStorageSync('userinfoImage')


},

//点击我的名片

creatInfoCard: function() {

wx.showLoading({

title: '生成中',

})

const that = this;

//暂存头像

setTimeout(function(){

that.downLoadImg();

},1000)

//暂存二维码

setTimeout(function(){

that.downLoadQr();

},1000)


//开始绘制名片

setTimeout(function () {

that.creatInfoCardNext();

}, 2000)

},


回答关注问题邀请回答
收藏

3 个回答

  • nicefeiniu🐂
    nicefeiniu🐂
    2018-12-17

    canvas中很多操作是异步执行,把异步改为同步就好了。或者用别人写好的组件吧

    2018-12-17
    有用
    回复
  • 卢霄霄
    卢霄霄
    2018-12-05

    能提供个代码片段吗?

    2018-12-05
    有用
    回复
  • Stephen
    Stephen
    2018-12-05

    代码执行顺序问题,改成同步的,导出图片可以加300毫秒延时

    2018-12-05
    有用
    回复 1
    • 2018-12-05

      还是不行的

      2018-12-05
      回复
登录 后发表内容