小程序画布图片覆盖文字,怎让文字显示出来？

Question

问题描述

小程序画布中文字的位置被覆盖了

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
//开始画图
createNewImg: function() {

let that = this;
let ctx = wx.createCanvasContext('myCanvas');
let contentHeight = this.data.canvasHeight;

// 画一个矩形容器
this.drawSquare(ctx, contentHeight);

// 最上面背景图
wx.getImageInfo({
  src: that.data.commonUrl + 'card1.png',
  success: function(res) {
    ctx.drawImage(res.path, 0, 0, that.data.canvasWidth, contentHeight*0.90);
    // 头像
    that.drawAvtar(ctx);
  }
})
// // 描述
that.drawFont(ctx, '推荐你试下! 人人都有奖励哟~', this.data.canvasWidth * 0.05, contentHeight * 0.98);
// 昵称 
that.drawFont(ctx, '安达市大所多', this.data.canvasWidth * 0.01, contentHeight * 0.67);

},
// 画一个矩形容器
drawSquare: function (ctx, height) {

ctx.rect( 0, 0, this.data.canvasWidth, height);
ctx.setFillStyle("#FFFFFF");
ctx.fill();

},

// 画头像
drawAvtar: function(ctx) {

let that = this
let avatarurl_width = 40; //绘制的头像宽度
let avatarurl_heigth = 40; //绘制的头像高度
let avatarurl_x = this.data.canvasWidth * 0.09; //绘制的头像在画布上的位置
let avatarurl_y = this.data.canvasHeight * 0.383; //绘制的头像在画布上的位置
ctx.save();
ctx.beginPath(); //开始绘制
//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
// 圆边框线
ctx.setStrokeStyle('black');
ctx.stroke();
//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因 

wx.getImageInfo({
  src: that.data.userInfo.avatarUrl,
  success: function(res) {
    ctx.drawImage(res.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth)
    //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
    ctx.restore()
  }
})
// 小程序码
that.drawQrcode(ctx);

},

// 画小程序二维码
drawQrcode: function(ctx) {

let that = this
let avatarurl_width = 70; //绘制的头像宽度
let avatarurl_heigth = 70; //绘制的头像高度
let avatarurl_x = this.data.canvasWidth * 0.10; //绘制的头像在画布上的位置
let avatarurl_y = this.data.canvasHeight * 0.73; //绘制的头像在画布上的位置
ctx.save();
ctx.beginPath();
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
ctx.setStrokeStyle('white');
ctx.stroke();
ctx.clip();
wx.getImageInfo({
  src: that.data.qrCode,
  success: function(res) {
    ctx.drawImage(res.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth)
    ctx.restore();
    wx.hideLoading();
    ctx.draw();
  }
})

},

// 写字
drawFont: function(ctx, content, x, y, color) {

console.log(content);
let tmpColor = color ? color : "#484a3d"
let tmpFont = color ? '16' : '14'
ctx.setFontSize(tmpFont);
ctx.setFillStyle(tmpColor);
ctx.fillText(content, x, y);

},

你期待的结果是什么？实际看到的错误信息又是什么？

有没有给出解决方案的

Answer 1

// 最上面背景图
wx.getImageInfo({
  src: that.data.commonUrl + 'card1.png',
  success: function(res) {
    ctx.drawImage(res.path, 0, 0, that.data.canvasWidth, contentHeight*0.90);
    // 头像
    that.drawAvtar(ctx);
    
    //描述
    that.drawFont(ctx, '推荐你试下! 人人都有奖励哟~', this.data.canvasWidth * 0.05, contentHeight * 0.98);
    // 昵称 
    that.drawFont(ctx, '安达市大所多', this.data.canvasWidth * 0.01, contentHeight * 0.67);
  }
})