问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 微信小程序 Bug canvas 客户端 6.5.3 2.3.0





- 预期表现




- 复现路径


// **分享到朋友圈
sharefriend: function (){
var that = this;
wx.getSystemInfo({
success:res =>{
console.log('微信小程序信息', parseFloat(res.version));
if (parseFloat(res.version) < 6.6){
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
return false;
}else{
that.setData({
share2: true,
share: false
});
wx.showLoading({
title: '正在生成图片...',
mask: true,
});
}
}
});


// 微信小程序获取图片信息API
wx.getImageInfo({
src: that.data.ctxUrl,
success: function (res) {
console.log(res);
that.setData({
ctxUrl: res.path
})
},
fail(err) {
console.log(err)
}
})



setTimeout(()=>{
var canvasCtx = wx.createCanvasContext('myCanvas');
canvasCtx.clearRect(0, 0, 0, 0);
//绘制背景
canvasCtx.drawImage('../../img/write.png', 0, 0, that.data.windowWidth * 0.8, that.data.windowHeight * 0.8);


//绘制名称
canvasCtx.setFontSize(18);
canvasCtx.setTextAlign('center');
canvasCtx.fillText(that.data.ctxName, that.data.windowWidth * 0.8 / 2, 120);


// 绘制信息
canvasCtx.setFontSize(18);
canvasCtx.setTextAlign('center');
canvasCtx.fillText(that.data.ctxRank, that.data.windowWidth * 0.8 / 6, 180);
canvasCtx.fillText(that.data.ctxNum, that.data.windowWidth * 0.8 / 2, 180);
canvasCtx.fillText(that.data.ctxPoints, (that.data.windowWidth * 4) / 6, 180);


// 绘制信息2
canvasCtx.setFontSize(13);
canvasCtx.setTextAlign('center');
canvasCtx.fillText('当前排名', that.data.windowWidth * 0.8 / 6, 200);
canvasCtx.fillText('得分', that.data.windowWidth * 0.8 / 2, 200);
canvasCtx.fillText('净胜分', (that.data.windowWidth * 4) / 6, 200);


// 绘制分割线
canvasCtx.drawImage('../../img/line.png', 0, 240, that.data.windowWidth * 0.8, 15);

// 比赛项目：羽神等你来战！丰厚礼品等着你
canvasCtx.setFontSize(12);
canvasCtx.setTextAlign('center');
canvasCtx.fillText('比赛项目：羽神等你来战！丰厚礼品等着你', that.data.windowWidth * 0.8 / 2.1, 285);


// 绘制二维码
canvasCtx.drawImage('../../img/code.jpg', (that.data.windowWidth * 0.8 / 2) - 50, that.data.windowHeight * 0.585, 100, 100);


//绘制头像
canvasCtx.save();
canvasCtx.beginPath(); //开始绘制
canvasCtx.arc(that.data.windowWidth * 0.8 / 2, 58, 38, 0, 2 * Math.PI, false);
canvasCtx.clip();
canvasCtx.drawImage(that.data.ctxUrl, that.data.windowWidth * 0.8 / 2 - 38, 20, 76, 76);
canvasCtx.restore();


canvasCtx.draw();
wx.hideLoading();
}, 1000)
},



// 保存绘制的图片
savePic: function () {
var that = this;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: that.data.windowWidth,
height: that.data.windowHeight,
destWidth: that.data.windowWidth,
destHeight: that.data.windowHeight,
canvasId: 'myCanvas',


success: function (res) {
if (!res.tempFilePath) {
wx.showModal({
title: '提示',
content: '图片绘制中，请稍后重试',
showCancel: false
})
}
util.savePicToAlbum(that,res.tempFilePath);
}
})
},



// 关闭绘制
closeShare:function(){
this.setData({
share: true,
share2: false
})
}


代码片段
wxab5015be2f345865

微信小程序开发问题解答