canvas textAlign 文字對齊

admin發表於2018-11-03
Canvas

textAlign屬性設定或者返回文字的對齊方式。

此屬性僅對使用fillText或者strokeText方法繪製的文字有效。

對齊是以文字的開始繪製的x軸座標為參考的。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
context.textAlign="center|end|left|right|start";

引數解析：

（1）.start：預設值，文字以指定位置起始。

（2）.end：文字以指定位置結束。

（3）.center：整個字串的中心位置被放置於指定位置。

（4）.left：文字左對齊指定位置。

（5）.right：文字右對齊指定位置。

上述闡述非常容易理解，關鍵點在於"指定位置"是哪個位置。

此位置就是fillText或者strokeText方法繪製文字開始位置的x軸座標。

瀏覽器相容:

（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=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  
  ctx.strokeStyle="red";
  ctx.moveTo(150,20);
  ctx.lineTo(150,170);
  ctx.stroke();
  
  ctx.font="15px Arial"; 
  
  ctx.textAlign="start"; 
  ctx.fillText("textAlign=start",150,60); 
  ctx.textAlign="end"; 
  ctx.fillText("textAlign=end",150,80); 
  ctx.textAlign="left"; 
  ctx.fillText("textAlign=left",150,100);
  ctx.textAlign="center"; 
  ctx.fillText("textAlign=center",150,120); 
  ctx.textAlign="right"; 
  ctx.fillText("textAlign=right",150,140);
}
</script>
</head>
<body>
<canvas id="ant"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/03/094934tpsmi1991p1en8nb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.紅色豎線的x軸座標與fillText方法繪製文字的起始位置x軸座標相同。

（2）.所有的對齊方式都是以起始位置x軸座標為參考的，也就是相當於以紅色豎線為參考。

（3）.start表示文字以x軸座標作為起始位置繪製（預設）。

（4）.end表示文字以x軸座標作為結束位置繪製。

（5）.left表示文字左側對齊x軸座標繪製。

（6）.right表示文字右側對齊x軸座標繪製。

direction屬性對對齊的實際繪製表現有所影響：

預設（ltr）文字由左到右排列，設定為"rtl"後，文字由右向左排列。

如果direction屬性值為"ltr"（預設），那麼：

（1）.left等同於start。

（2）.right等同於end。

如果direction屬性值為"rtl"（預設），那麼：

（1）.left等同於end。

（2）.right等同於start。

分析如下：

（1）.文字從左向右繪製，起始位置自然是左側，那麼left等同於start。

（2）.文字從右向左繪製，其實位置程式設計右側，同樣道理，right就等同於start。

特別說明：direction當前是一個實驗性質屬性，瀏覽器支援度非常低，不建議使用。

相關文章