問題描述

小程序畫布中文字的位置被覆蓋了

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）
//開始畫圖
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(); //開始繪制
//先畫個圓   前兩個參數(shù)確定了圓心 （x,y） 坐標  第三個參數(shù)是圓的半徑  四參數(shù)是繪圖方向  默認是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();
//畫好了圓 剪切  原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區(qū)域，則所有之后的繪圖都會被限制在被剪切的區(qū)域內(nèi) 這也是我們要save上下文的原因 

wx.getImageInfo({
  src: that.data.userInfo.avatarUrl,
  success: function(res) {
    ctx.drawImage(res.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth)
    //恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 還可以繼續(xù)繪制
    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);

},

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

有沒有給出解決方案的