problem description
the position of Chinese characters on Mini Program canvas is overwritten
the environmental background of the problems and what methods you have tried
related codes
/ / Please paste the code text below (do not replace the code with pictures)
/ / start drawing
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);},
/ / draw a rectangular container
drawSquare: function (ctx, height) {
ctx.rect( 0, 0, this.data.canvasWidth, height);
ctx.setFillStyle("-sharpFFFFFF");
ctx.fill();},
/ / draw an avatar
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);},
/ / draw Mini Program"s QR code
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();
}
})},
/ / write
drawFont: function (ctx, content, x, y, color) {
console.log(content);
let tmpColor = color ? color : "-sharp484a3d"
let tmpFont = color ? "16" : "14"
ctx.setFontSize(tmpFont);
ctx.setFillStyle(tmpColor);
ctx.fillText(content, x, y);},
what result do you expect? What is the error message actually seen?
is there a solution
?