html5 Canvas 可以使用各種字體，大小和顏色在html5畫(huà)布上繪制文本，文本的外觀由這些2D Context font屬性控制，要繪制文本，請(qǐng)使用fillText()或strokeText()功能。 在線示例可以使用各種字體，大小和顏色在HTML5畫(huà)布上繪制文本。 <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", 90);
</script>這是在畫(huà)布上繪制時(shí)的結(jié)果:
字體和樣式在HTML5畫(huà)布上繪制文本時(shí)，必須設(shè)置要使用的字體。這是通過(guò)設(shè)置2D上下文font屬性的值來(lái)完成的。此屬性是具有css兼容值的字符串，其格式為: [font style][font weight][font size][font face] 例如 context.font = "normal normal 20px Verdana"; 您可以為字體字符串的每個(gè)部分設(shè)置以下值:
請(qǐng)注意，并非每個(gè)瀏覽器都支持所有值。在依賴它們之前，您將必須測(cè)試計(jì)劃使用的值。 "italic bold 36px Arial" 繪圖文字如前所述，在HTML5畫(huà)布上繪制文本時(shí)，您可以繪制填充文本或輪廓文本。您可以使用2D上下文函數(shù)fillText()和進(jìn)行操作strokeText()。這些函數(shù)的定義如下: fillText (textString, x, y [,maxWidth]); strokeText (textString,maxWidth]); 該textString參數(shù)是繪制文本。 context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50);文字最大寬度可選maxWidth參數(shù)告訴畫(huà)布，文本在水平方向上不能比給定參數(shù)值占用更多空間。如果文字太寬而無(wú)法容納 maxWidth，則文字的寬度將被壓縮。它沒(méi)有被切斷。這是一個(gè)使用和不使用繪制相同文本的代碼示例maxWidth: context.font = "36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50);
context.fillText("HTML5 Canvas Text", 100, 200);這是在HTML5畫(huà)布上繪制時(shí)這兩個(gè)文本的外觀:
如您所見(jiàn)，第二個(gè)文本的寬度被壓縮以適合maxWidth 200個(gè)像素. 文字顏色像其他任何形狀一樣，使用2D上下文 的fillStyle和 strokeStyle屬性設(shè)置填充或描邊文本的顏色。在這里，我不會(huì)更詳細(xì)地介紹這些屬性。 測(cè)量文字寬度2D上下文對(duì)象具有可以測(cè)量文本像素寬度的功能。它無(wú)法測(cè)量高度。該函數(shù)稱為measureText()。這是一個(gè)代碼示例: var textMetrics = context.measureText("measure this");
var width = textMetrics.width;測(cè)量文本的寬度可用于計(jì)算文本字符串是否適合特定空間等。 文字基線文本基線確定如何解釋和 的y參數(shù)。換句話說(shuō)，垂直放置文本的位置以及該位置的解釋方式。請(qǐng)注意，瀏覽器在解釋此屬性的方式上也可能會(huì)有細(xì)微的差異。 fillText()strokeText()
這是一個(gè)示例，該示例y對(duì)所有文本使用相同的值（75）繪制文本，但對(duì)所繪制的每個(gè)文本使用不同的基線。將畫(huà)一條線y=75，向您顯示如何圍繞該y值設(shè)置文本基線。
下面是生成上述圖形的代碼: 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);文字對(duì)齊2D上下文textAlign屬性定義了繪制時(shí)文本如何水平對(duì)齊。換句話說(shuō)，該textAlign屬性定義了x繪制文本時(shí)的坐標(biāo).
以下是一些示例，顯示了該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", 40);
context.textAlign = "end";
context.fillText("end", 60);
context.textAlign = "left";
context.fillText("left", 80);
context.textAlign = "right";
context.fillText("right", 100);
</script>代碼運(yùn)行結(jié)果如下：
|
