HTML5 - canvas : font(1)

HTML

<canvas id="myFont" width="300" height="200" style="border:1px solid #999;"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myFont')[0].getContext('2d');
  var txt='BEAST';//設定文字文案。
  var _x=$('#myFont').width()/2;//取得畫布的橫向中心點。
  var _y=$('#myFont').height()/2;//取的畫布的直向中心點。
  cxt.font='oblique 40px Arial';//設定文字樣式。
  cxt.textAlign='center';//設定文字居中對齊。
  cxt.textBaseline='middle';//設定文字垂直置中對齊。
  cxt.fillStyle='#ccc';
  cxt.fillText(txt,_x,_y-20);//設定填色文字的文案與位置。
  cxt.strokeStyle='#664746';
  cxt.strokeText(txt,_x,_y-20);//設定線框文字的文案與位置。
  
  var txtW=cxt.measureText(txt).width;//取得繪製文字的寬度。
  cxt.font='normal 20px Calibri';
  cxt.fillStyle='#333';
  cxt.fillText(txtW+'PX',_x,_y+20);
});

主要使用function :

1. textAling - 設定文字左右對齊依據。

   值	屬性
   start	預設值，內文在指定位置開始。
   end	內文在指定位置結束。
   right	內文以指定位置居右對齊。
   center	內文以指定位置居中對齊。
   left	內文以指定位置居左對齊。

   
   
2. textBaseLine - 設定文字垂直對齊的基線，以1em為高度基準。
   

   

   圖片來源：http://www.w3school.com.cn/i/textBaseline.gif

   值	屬性
   alphabetic	預設值，文字位在普通字母基線。
   top	文字位在以1em平方為單位的方框上端。
   hanging	文字位在懸掛基線。
   middle	文字位在以1em平方為單位的方框中間。
   ideographic	文字位在表意基線。
   bottom	文字位在以1em平方的方框下端。

   
   
3. fillText() - 把填色文字寫入<canvas>，fillText('要寫入的文案',起始x軸,起始y軸)。
4. strokeText() - 把線框文字寫入<canvas>，strokeText('要寫入的文案',起始x軸,起始y軸)。
5. font - 在畫布上寫一段文案，默認值為10px sans-serif。最少需填寫font='font-size,font-family'兩個值。
   

   值	屬性
   font-style	字體樣式：normal正常 / italic斜體 / oblique斜體
   font-variant	字體變體：normal正常 / small-caps小型大寫字體
   font-weight	字體粗細：normal正常 / bold粗體 / bolder特粗體 / lighter細體 / 100 ~ 900自訂粗細
   font-size / line-height	字體大小與行高，以px為單位。
   font-family	字型，常用的為： Arial / courier New / Times New Roman 等等。
   caption	使用標題控制元件<caption>的字體EX：button、drop-downs等等。
   icon	使用於標記圖示的字體。
   menu	使用於菜單的字體。
   message-box	使用於對話框的字體。
   small-caption	使用於小型控制元件的字體。
   status-bar	使用在window視窗狀態欄的字體。
   initial	將此屬性設置為默認值。
   inherit	繼承父元件的文字屬性。

   
   
6. measureText().width - measureText(要測量的文本).width，取的畫布上的文字寬度。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/bbryzekb/