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画布