HTML 畫布 - 文字

可以使用可用的方法和屬性在畫布元素上渲染文字。我們還可以設定繪製文字的樣式，以便生成有效的圖形。

TextMetrics 介面和 CanvasRenderingcontext2D 用於繪製和設定文字樣式，以及識別在畫布元素內渲染的文字的結構屬性。文字通常使用 CanvasRenderingContext2D 物件透過可用方法進行渲染，也可以使用只讀屬性檢索。

下表列出了在畫布元素上繪製和設定文字樣式的可用屬性。

序號	屬性和描述
1	actualBoundingBoxAscent 此屬性返回從基線屬性指示的水平線到在畫布內繪製文字的矩形頂部的距離。
2	actualBoundingBoxDescent 此屬性返回從基線屬性指示的水平線到在畫布內繪製文字的矩形底部的距離。
3	actualBoundingBoxLeft 此屬性返回平行於文字基線到文字邊界矩形左側的距離（以畫素為單位）。
4	actualBoundingBoxRight 此屬性返回平行於文字基線到文字邊界矩形右側的距離（以畫素為單位）。
5	direction direction 屬性指定即將繪製到畫布元素上的文字的方向。
6	font 此 Canvas API 屬性指定即將繪製到畫布元素上的文字的文字大小、樣式和字型樣式。
7	fontBoundingBoxAscent TextMetrics 介面的此屬性返回從文字基線的水平線到畫布內文字最高邊界矩形頂部的距離。
8	fontBoundingBoxDescent TextMetrics 介面的此屬性返回從文字基線的水平線到畫布內文字最高邊界矩形底部的距離。
9	textAlign 畫布元素物件的此屬性指定繪製文字時要使用的文字對齊方式。
10	textBaseline 畫布元素物件的此屬性指定繪製文字時要使用的文字基線。

以下是可用於對 HTML 畫布的文字元素執行各種操作的各種方法。

序號	方法和描述
1	fillText() 此方法填充繪製在畫布元素上的文字。
2	measureText() 使用此方法時，將返回繪製到畫布上的文字資訊。
3	strokeText() 此方法向要在畫布元素上繪製的文字新增描邊。

列印頁面