CanvasRenderingContext2D: fillText() 方法
CanvasRenderingContext2D 的 fillText() 方法是 Canvas 2D API 的一部分，它會在指定的座標處繪製一個文字字串，並使用當前的 fillStyle 填充該字串的字元。還有一個可選引數，允許指定渲染文字的最大寬度，使用者代理會透過壓縮文字或使用較低的字型大小來實現這一點。
此方法直接繪製到畫布上，而不會修改當前路徑，因此任何後續的 fill() 或 stroke() 呼叫都不會對其產生影響。
文字的渲染使用由 font、textAlign、textBaseline 和 direction 屬性定義的字型和文字佈局配置。
注意： 要繪製字串中字元的輪廓，請呼叫上下文的 strokeText() 方法。
語法
fillText(text, x, y)
fillText(text, x, y, maxWidth)
引數
文字-
一個指定要渲染到上下文中的文字字串。文字使用
font、textAlign、textBaseline和direction指定的設定進行渲染。 x-
文字開始繪製的點的 x 軸座標，以畫素為單位。
y-
文字開始繪製的基線的 y 軸座標，以畫素為單位。
maxWidth可選-
渲染後文本可能擁有的最大畫素寬度。如果未指定，則文字寬度沒有限制。但是，如果提供了此值，使用者代理將透過調整字距、選擇更緊湊的水平字型（如果可用或可以無損生成）或縮小到更小的字型大小來使文字適應指定的寬度。
返回值
無（undefined）。
示例
繪製填充文字
此示例使用 fillText() 方法寫入 "Hello world" 字樣。
HTML
首先，我們需要一個畫布來繪製。此程式碼建立一個寬度為 400 畫素、高度為 150 畫素的上下文。
<canvas id="canvas" width="400" height="150"></canvas>
JavaScript
此示例的 JavaScript 程式碼如下。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90);
此程式碼獲取對 <canvas> 的引用，然後獲取對其 2D 圖形上下文的引用。
在此基礎上，我們將 font 設定為 50 畫素高的 "serif"（使用者預設的 serif 字型），然後呼叫 fillText() 在座標 (50, 90) 處繪製 "Hello world" 文字。
結果
限制文字大小
此示例寫入 "Hello world" 字樣，並將其寬度限制為 140 畫素。
HTML
<canvas id="canvas" width="400" height="150"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90, 140);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-filltext-dev |
瀏覽器相容性
載入中…