html5 的canvas 提供了多樣性的功能。

在canvas中提供了將文字作為圖片輸出到畫布上的功能，通常用到的函式主要有canvas.drawText 和canvas.fillText兩個。

以canvas.fillText()函式為例，在canvas.fillText("information" , width , height , maxwidth )中包含四個引數，"information"表示文字輸出的內容，width和height分別表示你想要輸出的文字起始字元左上角的位置，而maxwidth則表示了該字串的最大寬度，例如將maxwidth設為100，則無論字串有多長，都將限制在100畫素寬度內。

下面程式碼則寫了一個可以將長字串自動換行的程式。程式碼如下：

function draw_long_text(longtext,cxt,begin_width,begin_height)
{ 
  var linelenght = 20;
  var text = "";
  var count = 0;
  var begin_width = begin_width;
  var begin_height = begin_height;
  var stringLenght = longtext.length;
  var newtext = longtext.split("");
  var context = cxt;
  context.clearRect(0,0, 600,300);
  context.textAlign = 'left';
  
  for(i = 0; i <= stringLenght ; i++)
  {
    
    if(count == 20)
	{
	context.fillText(text,begin_width,begin_height);
	begin_height = begin_height + 25;
	text = "";
	count = 0;
	}
	if(i == stringLenght)
	{
	context.fillText(text,begin_width,begin_height);
	}
    var text = text + newtext[0];
	count ++;
	newtext.shift();	
  }
}
 

其中cxt為獲取到的canvas的例項。將上述程式碼儲存為js檔案，然後在html中引用，就可以實現字元自動換行了。