HTML5 Canvas 繪制文本

HTML5 Canvas 可以使用各種字體，大小和顏色在HTML5畫布上繪制文本，文本的外觀由這些2D Context font屬性控制，要繪制文本，請使用fillText()或strokeText()功能。

在線示例

可以使用各種字體，大小和顏色在HTML5畫布上繪制文本。
文本的外觀由這些2D Context font屬性控制。此外，您需要根據(jù)要繪制填充文本還是描邊文本來設置fillStyle或strokeStyle2D Context屬性。
要繪制文本，請使用fillText()或strokeText()功能
這是一個簡單的代碼示例:

<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
   var canvas  = document.getElementById("ex1");
   var context = canvas.getContext("2d");
   context.font = "36px Verdana";
   context.fillStyle = "#000000";
   context.fillText("HTML5 Canvas Text", 50, 50);

   context.font        = "normal 36px Arial";
   context.strokeStyle = "#000000";
   context.strokeText("HTML5 Canvas Text", 50, 90);
 </script>

這是在畫布上繪制時的結果:

字體和樣式

在HTML5畫布上繪制文本時，必須設置要使用的字體。這是通過設置2D上下文font屬性的值來完成的。此屬性是具有CSS兼容值的字符串，其格式為:

[font style][font weight][font size][font face]

例如

context.font = "normal normal 20px Verdana";

您可以為字體字符串的每個部分設置以下值:

請注意，并非每個瀏覽器都支持所有值。在依賴它們之前，您將必須測試計劃使用的值。
這是另一個示例:

"italic bold 36px Arial"

繪圖文字

如前所述，在HTML5畫布上繪制文本時，您可以繪制填充文本或輪廓文本。您可以使用2D上下文函數(shù)fillText()和進行操作strokeText()。這些函數(shù)的定義如下:

fillText   (textString, x, y [,maxWidth]);
strokeText (textString, x, y [,maxWidth]);

該textString參數(shù)是繪制文本。
在x和y代表在文字中得出的位置。該x 參數(shù)是文本開始的地方。該y參數(shù)是文本垂直放置的位置，但是確切的表示方式取決于文本基線。文本基線將在后面的部分中介紹。
該maxWidth文本被覆蓋在下面的部分。
這是一個代碼示例:

context.font      = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);

文字最大寬度

可選maxWidth參數(shù)告訴畫布，文本在水平方向上不能比給定參數(shù)值占用更多空間。如果文字太寬而無法容納 maxWidth，則文字的寬度將被壓縮。它沒有被切斷。這是一個使用和不使用繪制相同文本的代碼示例maxWidth:

context.font      = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);
context.fillText("HTML5 Canvas Text", 50, 100, 200);

這是在HTML5畫布上繪制時這兩個文本的外觀:

如您所見，第二個文本的寬度被壓縮以適合maxWidth 200個像素.

文字顏色

像其他任何形狀一樣，使用2D上下文 的fillStyle和 strokeStyle屬性設置填充或描邊文本的顏色。在這里，我不會更詳細地介紹這些屬性。有關 更多詳細信息，請參見描邊和填充。

測量文字寬度

2D上下文對象具有可以測量文本像素寬度的功能。它無法測量高度。該函數(shù)稱為measureText()。這是一個代碼示例:

var textMetrics = context.measureText("measure this");

var width = textMetrics.width;

測量文本的寬度可用于計算文本字符串是否適合特定空間等。

文字基線

文本基線確定如何解釋和 的y參數(shù)。換句話說，垂直放置文本的位置以及該位置的解釋方式。請注意，瀏覽器在解釋此屬性的方式上也可能會有細微的差異。 fillText()strokeText()
使用textBaseline2D上下文的屬性設置文本基線。以下是它可以采用的值及其含義:

這是一個示例，該示例y對所有文本使用相同的值（75）繪制文本，但對所繪制的每個文本使用不同的基線。將畫一條線y=75，向您顯示如何圍繞該y值設置文本基線。

下面是生成上述圖形的代碼:

context.stokeStyle = "#000000";
context.lineWidth  = 1;
context.beginPath();
context.moveTo(  0, 75);
context.lineTo(500, 75);
context.stroke();
context.closePath();

context.font      = "16px Verdana";
context.fillStyle = "#000000";

context.textBaseline = "top";
context.fillText("top", 0, 75);

context.textBaseline = "hanging";
context.fillText("hanging", 40, 75);

context.textBaseline = "middle";
context.fillText("middle", 120, 75);

context.textBaseline = "alphabetic";
context.fillText("alphabetic", 200, 75);

context.textBaseline = "ideographic";
context.fillText("ideographic", 300, 75);

context.textBaseline = "bottom";
context.fillText("bottom-glyph", 400, 75);

文字對齊

2D上下文textAlign屬性定義了繪制時文本如何水平對齊。換句話說，該textAlign屬性定義了x繪制文本時的坐標.

以下是一些示例，顯示了該textAlign屬性的工作方式。垂直線在處繪制x = 250。所有文本也都繪制有x = 250，但是textAlign屬性的值不同。

這是圖形的代碼示例：

<canvas id="ex4" width="500" height="120" style="border: 1px solid #cccccc;">
    HTML5 Canvas not supported
</canvas>
<script>
var canvas  = document.getElementById("ex4");
var context = canvas.getContext("2d");

context.stokeStyle = "#000000";
context.lineWidth  = 1;
context.beginPath();
context.moveTo( 250, 0);
context.lineTo( 250, 250);
context.stroke();
context.closePath();

context.font      = "16px Verdana";
context.fillStyle = "#000000";

context.textAlign = "center";
context.fillText("center", 250, 20);

context.textAlign = "start";
context.fillText("start", 250, 40);

context.textAlign = "end";
context.fillText("end", 250, 60);

context.textAlign = "left";
context.fillText("left", 250, 80);

context.textAlign = "right";
context.fillText("right", 250, 100);
</script>

代碼運行結果如下：