problem description
Mini Program"s custom component I used canvas drawing, in the development tool can display the content drawn by canvas, but not on the real machine, and on the real machine to open debugging can show, what is the reason?
related codes
as follows:
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 = "-sharp333";
ctx.fillText(that.data.nickName, Width * 0.5, Height * 0.293, Width * 0.818);
ctx.save();
ctx.draw()
},
what result do you expect? What is the error message actually seen?
is there anything the great god knows?