微信小程序使用html2canvas,微信小程序的自定义组件中使用canvas在真机上不显示绘制内容...

问题描述

小都前发请难楚的等款平近是端这求只u站行纯程序的自定义组件我使用了canvas绘制，在开发工具上可以显示canvas绘制的内容，但是在真机上不显示，而在真机上打开调试又可以显示，是什么调代求学功解宗维如请框总行断随以移泉动实使时近用码的会能,，护小求架结商的机我动水画现用还近用码的会能,，护小求架结商的机我动水画现用还近用码的会能,，原因？。

相关代码

如下：

methods: {

openfun() {

let that= this;

wx.downloadFile({

url: that.data.avatarUrl,

success: function (res) {

// console.log(res.tempFilePath);

that.setData({

avatarUrl:res.tempFilePath,

})

//绘图方法

that.drawImage();

}, fail: function (fres) {

}

})

},

drawImage:function() {

//绘制canvas图片

var that = this

const ctx = wx.createCanvasContext('sharePhoto',this)

// console.log(wx.getSystemInfoSync())

var Width = wx.getSystemInfoSync().windowWidth*0.74

var Height = wx.getSystemInfoSync().windowHeight * 0.68

var bgPath = '/pages/images/nimg557_1.jpg'

var bgPath2 = '/pages/images/nimg456_1.png'

var avatarUrl = that.data.avatarUrl

//绘制图片

ctx.drawImage(bgPath, 0, 0, Width, Height)

ctx.drawImage(bgPath2, Width * 0.0897, Height*0.175, Width*0.818, Height*0.758)

ctx.save();

ctx.beginPath();

ctx.arc(Width * 0.5, Height * 0.175, Width * 0.098, 0, 2 * Math.PI);

ctx.clip();//画了圆 再剪切

ctx.drawImage(avatarUrl, Width * 0.4, Height * 0.109, Width*0.197, Height*0.132)

ctx.restore();

ctx.textAlign = "center";

ctx.font = "16rpx Arial";

ctx.fillStyle = "#333";

ctx.fillText(that.data.nickName, Width * 0.5, Height * 0.293, Width * 0.818);

ctx.save();

ctx.draw()

},

你期览页些求时是过解些这确如目前例总站回广随待的结果是什么？实际看到的错误信是能览调不页新代些事几求事都时学下是事功过发,解息又是什么？

请问有没有大神知道的比抖朋要插支一圈不者地？