华为p30使用canvas画文本时,画出的文本上有白色的字覆盖在文本上。
draw_new(backbg, avatar, qrcode) {
const scale = 3
// 画背景图
let x0 = 0;
let y0 = 0;
let width0 = WIDTH,
height0 = HEIGHT;
context.drawImage(backbg, x0, y0, width0, height0);
context.closePath()
context.restore()
// 画口令文本
var wordName = this.sendRecord.wordName // 43
let wordX = 138 * scale
let wordY = 161 * scale
let tRow = 1
let tFont = 25 * scale
if (wordName.length > 12 && wordName.length <= 26) {
wordY = 151 * scale
tRow = 2
tFont = 20 * scale
} else if (wordName.length >= 27) {
wordY = 139.5 * scale
tRow = 3
tFont = 20 * scale
}
let tW = context.measureText(wordName).width
tW = tW > 260 * scale ? 260 * scale : tW
// let wordNameList = this.sendRecord.wordName.match(/[\s\S]{1,16}/g) || [];
_util.handleLimitRowText(context, wordX, wordY, '#d2433b', tFont, wordName, 260 * scale, WIDTH, 3, 'center', true)
var nickName = _this.data.sendRecord.nickName
if (nickName.length > 12) {
nickName = nickName.slice(0, 12) + '...'
}
nickName = nickName + '的语音红包' // 43
let nW = context.measureText(nickName).width
nW = nW > 260 * scale ? 260 * scale : nW
let nX = (WIDTH - nW) * 0.5
context.beginPath()
context.setLineCap('round')
context.setLineWidth(30 * scale)
context.globalAlpha = 0.05;
var liNw = context.measureText(nickName).width
context.moveTo(WIDTH / 2 - nW / 2, (327.5 + 15) * scale)
context.lineTo(WIDTH / 2 + nW / 2, (327.5 + 15) * scale)
context.stroke()
context.globalAlpha = 1;
_util.handleLimitRowText(context, nX, 336.5 * scale, '#fbe8bd', 15 * scale, nickName, 260 * scale, WIDTH, 1, 'center', false)
// 画头像
let x1 = 147.5 * scale;
let y1 = 232.5 * scale;
let width1 = 80 * scale,
height1 = 80 * scale;
context.save()
context.beginPath()
context.arc(x1 + width1 * 0.5, y1 + height1 * 0.5, width1 * 0.5, 0, 2 * Math.PI)
context.setStrokeStyle('transparent')
context.stroke()
context.clip()
context.drawImage(avatar, x1, y1, width1, height1);
context.closePath()
context.restore()
// 二维码
let x6 = 150 * scale;
let y6 = 464.5 * scale;
let width6 = 75 * scale,
height6 = 75 * scale;
context.save()
context.beginPath()
context.drawImage(qrcode, (WIDTH - width6) * 0.5, y6, width6, height6);
context.closePath()
context.restore()
context.draw(true, () => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
destWidth: WIDTH,
destHeight: HEIGHT,
canvasId: 'myCanvas',
success: (res) => {
wx.hideLoading()
this.setData({
image: res.tempFilePath,
show_canvas_box: true
})
}
})
})
},
1 回复
请具体描述问题出现的流程,并提供能复现问题的简单代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
扫码提供下扫码结果截图