canvas textBaseline 屬性

admin發表於2019-08-29
Canvas

此屬性可以設定或者返回文字的基線位置。

在CSS中存在基線的概念，canvas中同樣存在。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201908/29/222301kvfehzhf6qxeppxq.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"

引數解析：

（1）.alphabetic：預設，文字基線是普通的字母基線。

（2）.top：文字基線是 em 方框的頂端。

（3）.hanging：文字基線是懸掛基線。

（4）.middle：文字基線是 em 方框的正中。

（5）.ideographic：文字基線是表意基線。

（6）.bottom：文字基線是 em 方框的底端。

關於em方框具體內容可以參閱em 方法是什麼一章節。

瀏覽器相容：

（1）.IE9+瀏覽器支援此屬性。

（2）.谷歌瀏覽器支援此屬性。

（4）.谷歌瀏覽器支援此屬性。

（5）.火狐瀏覽器支援此屬性。

（6）.Opera瀏覽器支援此屬性。

（7）.Safari瀏覽器支援此屬性。

特別說明：此屬性在不同的瀏覽器上效果可能不同，特別是使用"hanging" 或 "ideographic"時。

程式碼例項如下：

[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 = () => {
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  
  ctx.strokeStyle="red";
  ctx.moveTo(5,100);
  ctx.lineTo(395,100);
  ctx.stroke();
  
  ctx.font="20px Arial"
  
  ctx.textBaseline="top"; 
  ctx.fillText("Top",5,100); 
  ctx.textBaseline="bottom"; 
  ctx.fillText("Bottom",50,100); 
  ctx.textBaseline="middle"; 
  ctx.fillText("Middle",120,100); 
  ctx.textBaseline="alphabetic"; 
  ctx.fillText("Alphabetic",190,100); 
  ctx.textBaseline="hanging"; 
  ctx.fillText("Hanging",290,100); 
}
</script>
</head>
<body>
<canvas id="myCanvas">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201908/29/222401p6xk4e8868pp8fcf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼為繪製的文字設定不同的基線位置，可以看到表現區別很大。

關於fillText()方法可以參閱canvas fillText()一章節。

相關文章