小程序 Canvas 文字居中解决方案

使用 ctx.measureText 计算文本宽度
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);
效果

小程序 Canvas 文字居中解决方案_第1张图片

接口文档

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

你可能感兴趣的:(微信小程序)