在微信小程序的 Canvas 绘图中，可以使用 measureText 方法来获取文本的宽度信息。这个方法返回一个 TextMetrics 对象，其中包含了测量文本宽度的信息。

以下是一个简单的示例，演示了如何使用 measureText 方法获取文本宽度：
Page({
  onReady: function () {
    const ctx = wx.createCanvasContext('myCanvas');

    // 设置文本样式
    ctx.setFontSize(20);
    ctx.setFillStyle('black');

    // 绘制文本
    const text = 'Hello, 微信小程序!';
    ctx.fillText(text, 20, 30);

    // 获取文本宽度信息
    const textMetrics = ctx.measureText(text);
    const textWidth = textMetrics.width;

    // 在文本下方绘制一个矩形，宽度与文本相同
    ctx.setFillStyle('lightgray');
    ctx.fillRect(20, 50, textWidth, 20);

    // 绘制到 canvas 上
    ctx.draw();
  }
});

在这个示例中，我们首先使用 setFontsize 和 setFillStyle 设置文本样式，然后使用 fillText 绘制了一段文本。接着，通过 measureText 方法获取文本宽度信息，并在文本下方绘制了一个相同宽度的矩形，以展示 measureText 的使用。




转载请注明出处：http://www.zyzy.cn/article/detail/1009/微信小程序