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

最新推荐文章于 2025-08-07 20:14:39 发布

原创最新推荐文章于 2025-08-07 20:14:39 发布 · 4.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#Canvas #微信小程序

微信小程序专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在微信小程序中使用CanvasContext.measureText方法来精确计算文本宽度，并实现文本的居中显示。通过设定画布样式，填充背景色，设置字体大小及颜色，最后根据计算的文本宽度进行居中绘制。

使用 `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);