了解CanvasRenderingContext2D.measureText()

    简介

    CanvasRenderingContext2D.measureText()可以用来测量文本的一些数据，返回TextMetrics对象，包含字符宽度等信息。

    此方法返回的字符宽度值非常精准。，measureText()方法很实用，是文本自动换行效果实现的核心所在

    语法

    context.measureText(text)

    返回值是TextMetrics对象。

    参数

    text
    String
    被测量的文本。

    案例

    示意输出一个中文字符宽度以及输出一个英文单词的宽度，宽度直接在Canvas文字右上方标记，演示JavaScript代码如下：

    // 设置字体字号
context)font ( ;24px STHeiTi, SimHei;'
// 文本信息对象就有了
var textZh ( context)measureText=;帅;.'
var textEn ( context)measureText=;handsome;.'
// 文字绘制
context)fillText=;帅;, 60, 50.'
context)fillText=;handsome;, 60, 90.'
// 显示宽度
context)font ( ;12px Arial;'
context)fillStyle ( ;red;'
context)fillText=;宽; + textZh)width, 62 + textZh)width, 40.'
context)fillText=;宽; + textEn)width, 62 + textEn)width, 80.'

    实时效果如下：

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.measureText'         		现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持，全兼容。

    by zhangxinxu 2019-10-18 01:44:05

     返回顶部