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