HTML canvas(画布)measureText()方法

  • measureText()方法定义和用法

    measureText()方法返回一个包含指定文本宽度的对象(以像素为单位)。
    提示:如果在将文本写入画布之前需要知道文本的宽度,请使用此方法。

  • measureText()方法浏览器支持

    Internet Explorer Chrome FireFox Safari Opera
    9.0(含)以上 支持 支持 支持 支持
  • measureText()方法语法

    context.measureText(text).width;

  • measureText()方法实例

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    var txt = "Hello World"
    ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50);
    ctx.fillText(txt, 10, 100);
    
    尝试一下
  • measureText()参数值

    参数 描述
    text 待测文本
  • measureText()方法相关页面

    HTML教程:HTML脚本

    HTML教程:HTML画布