Small program Canvas text centering solution

Using ctx.measureTextcomputed text width
let ctx = wx.createCanvasContext('Poster');
let str = `这是一段居中的文字`
let W = this.data.buildWidth;
ctx.setFillStyle('#99bef5');
ctx.fillRect(0, 0, W, W * 2)

ctx.setFontSize(15);
ctx.setFillStyle('#565656');
// 剩余宽度50%开始绘制文字
ctx.fillText(str,(W - ctx.measureText(str).width) * 0.5 ,W * 0.1);
effect

Insert picture description here

Interface documentation

https://developers.weixin.qq.com/miniprogram/dev/api/CanvasContext.measureText.html

Guess you like

Origin blog.csdn.net/Ruffaim/article/details/85244598