了解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 2018-10-15 23:54:34