HTML5 - canvas : font(2)

HTML

<!--Original source http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/-->
<canvas id="myFont" width="500" height="400"></canvas>

JQuery 1.9.1

$(function(){
  function wrapText(cxt,txt,x,y,maxWidth,lineHeight){
  //cxt:<canvas>,txt:文案,x:文案的起始x軸,y:文案的起始y軸,maxWidth:文案的最大寬度,lineHeight:文案行高

    var words=txt.split(' ');//把文案用空白字元為依據來分割並給予words。
    var line='';//擷取出來的單字將要存入的容器。
    
    for(var n=0; n < words.length; n++){//按照擷取出來的單字總數來循環執行。
      var txtLine=line+words[n]+' ';//每個單字加上一個空白字元並放入txLine。
      var metrics=cxt.measureText(txtLine).width;//計算每一次執行時txtLine長度是多少。
      if(metrics > maxWidth && n > 0){//判斷當txtLine長度超過maxWidth且文字多於0個。
       cxt.fillText(line,x,y);//新增一行文字。
        line=words[n]+' ';//改變該行文字的第一個字為使txtLine超出maxWidth的那個文字。
        y+=lineHeight;//y軸往下移動一個LineHeight的高度。
      }else{
       line=txtLine;//直接蓋過原本的當行的文字。
      };
    };
    cxt.fillText(line,x,y);//創建第一行文字。
  };
  var article='The greatest test of courage on earth is to bear defeat without losing heart. 
               世界上對勇氣的最大考驗是忍受失敗而不喪失信心。';
  var cxt=$('#myFont')[0].getContext('2d');
  cxt.font='20px Calibri';
  cxt.fillStyle='#666';
  wrapText(cxt,article,10,20,490,30);
});

主要使用function :

1. wrapText() - 此function的作用為，繪製一個規定範圍內按照英文書寫習慣，文案自動折行。
2. split() - 把一段文字分割成多個單一文字，'文字物件'.split('字符串或正則表達式，按照這個值去分割文字物件 - 必填', '返回分割的最大返回分割的最大長度，以1為起始計算點，無設定以全文字物件長度返回 - 非必填')。
   

   範例	解說
   "Hi! How was today?".split( '' );	結果//H,i,!, ,H,o,w, ,w,a,s, ,t,o,d,a,y,? 每一個字元包含空白字元都會被分割列出。
   "Hi! How was today?".split( ' ' );	結果//Hi!,How,was,today? 使用'空白字元'會以空白字元為分割點分割列出，空白字元會被省略掉。
   "Hi! How was today?".split( ' ', 2 );	結果//Hi!,How 只抓取第1、2個單字。
   ":1:2:3".split( ':' );	結果// ,1,2,3 以：作為分割點分割列出，：會被省略掉。
   var words = sentence.split( ' / \s+/ ' );	把句子分割成單字。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/84cuwtos/