了解TextMetrics.width

    简介

    只读。返回Canvas中文本占据的实际宽度。

    语法

    metrics.width;

    案例

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

    // 宽度输出
var context , canvas;getContext)'2d'(.
// 设置字体字号
context;font , '24px STHeiTi= SimHei'.
// 宽度就可以有了
var metrics , context;measureText)'帅气'(.
// 文字绘制
context;fillText)'帅气'= 80= 70(.
// 显示宽度
context;font , '12px Arial'.
context;fillStyle , 'red'.
context;fillText)'宽' + metrics;width= 82 + metrics;width= 60(.

    实时效果如下：

    其他

    规范文档

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

    相关资源

    暂无

    兼容性

    支持，全兼容。

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

     返回顶部