HTML5 Canvas如何繪制文本

這篇文章主要介紹HTML5 Canvas如何繪制文本，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　HTML5 Canvas 繪制文本

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

　　在線示例

　　可以使用各種字體，大小和顏色在HTML5畫布上繪制文本。

　　文本的外觀由這些2D Context font屬性控制。此外，您需要根據要繪制填充文本還是描邊文本來設置fillStyle或strokeStyle2D Context屬性。

　　要繪制文本，請使用fillText（）或strokeText（）功能

　　這是一個簡單的代碼示例：

　　示例

　　HTML5?Canvas?not?supported

　　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）;

　　測試看看 ?/?

　　這是在畫布上繪制時的結果：HTML5 Canvas not supported

　　字體和樣式

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

　　例如context.font?=?"normal?normal?20px?Verdana";

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

　　italic

　　oblique

　　inherit

　　font weightnormal

　　bold

　　bolder

　　lighter

　　auto

　　inherit

　　100

　　200

　　300

　　400

　　500

　　600

　　700

　　800

　　900

　　font size以像素為單位的大小，例如12px，20px等

　　font face字體， e.g. verdana, arial, serif, sans-serif, cursive, fantasy, monospace etc.

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

　　這是另一個示例："italic?bold?36px?Arial"

　　繪圖文字

　　如前所述，在HTML5畫布上繪制文本時，您可以繪制填充文本或輪廓文本。您可以使用2D上下文函數fillText（）和進行操作strokeText（）。這些函數的定義如下：fillText?（textString,?x,?y?[,maxWidth]）;

　　strokeText?（textString,?x,?y?[,maxWidth]）;

　　該textString參數是繪制文本。

　　在x和y代表在文字中得出的位置。該x 參數是文本開始的地方。該y參數是文本垂直放置的位置，但是確切的表示方式取決于文本基線。文本基線將在后面的部分中介紹。

　　該maxWidth文本被覆蓋在下面的部分。

　　這是一個代碼示例：context.font=?"36px?Verdana";

　　context.fillStyle?=?"#000000";

　　context.fillText（"HTML5?Canvas?Text",?50,?50）;

　　文字最大寬度

　　可選maxWidth參數告訴畫布，文本在水平方向上不能比給定參數值占用更多空間。如果文字太寬而無法容納 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畫布上繪制時這兩個文本的外觀：HTML5 Canvas not supported

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

　　文字顏色

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

　　測量文字寬度

　　2D上下文對象具有可以測量文本像素寬度的功能。它無法測量高度。該函數稱為measureText（）。這是一個代碼示例：var?textMetrics?=?context.measureText（"measure?this"）;

　　var?width?=?textMetrics.width;

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

　　文字基線

　　文本基線確定如何解釋和 的y參數。換句話說，垂直放置文本的位置以及該位置的解釋方式。請注意，瀏覽器在解釋此屬性的方式上也可能會有細微的差異。 fillText（）strokeText（）

　　使用textBaseline2D上下文的屬性設置文本基線。以下是它可以采用的值及其含義：top文本根據文本中最高字形的頂部對齊

　　hanging文本根據似乎懸掛的行對齊。這幾乎與top相同，并且在許多情況下您看不到差異。

　　middle文本根據文本的中間對齊。

　　alphabetic垂直定向字形的底部，例如拉丁字母等西方字母

　　ideographic水平定向字形的底部。

　　bottom文本是根據文本中字形的底部對齊的，該字形在文本中向下延伸最低。

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

　　下面是生成上述圖形的代碼：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繪制文本時的坐標。start緊隨該x位置之后繪制文本

　　left緊隨x位置之后才繪制文本，例如start。

　　center文本的中心位于一個x位置。

　　end文本的結尾位于x位置。

　　right文本的右邊緣位于x位置，例如end。

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

　　這是圖形的代碼示例：

　　示例

　　HTML5?Canvas?not?supported

　　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）;

以上是“HTML5 Canvas如何繪制文本”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！