canvas measureText()

admin發表於2019-08-25
Canvas

measureText方法可以測量文字的寬度，從其名稱入手有助於理解與記憶。

此方法名稱由如下兩個單詞合成：

（1）.measure：翻譯成漢語具有"測量"和"度量"的意思。

（2）.text：翻譯成漢語具有"文字"的意思。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.measureText(text).width;

方法解析：

（1）.text：將要被測量的文字。

（2）.width：此方法返回一個物件，其width屬性可以返回文字的寬度。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。

（4）.火狐瀏覽器支援此方法。

（5）.Opera瀏覽器支援此方法。

（6）.Safari瀏覽器支援此方法。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style> 
<script>
window.onload = () => {
  let cvs=document.getElementById("myCanvas");
  let ctx=cvs.getContext("2d");
  ctx.font="30px Arial";
  let txt="螞蟻部落"
  ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
  ctx.fillText(txt,10,100);
  console.log(ctx.measureText(txt))
}
</script>
</head>
<body>
<canvas id="myCanvas">當前瀏覽器canvas標籤</canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/25/093921dta7nkn6nti6rgqi.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.首先繪製一段文字，然後通過measureText()方法去測量文字。

（2）.此方法返回一個物件，此物件具有一個width屬性，返回文字的寬度。

相關文章