CanvasRenderingContext2D: fontStretch 屬性
Canvas API 的 CanvasRenderingContext2D.fontStretch 屬性用於指定在繪製文字時字型可以如何被拉伸或壓縮。
該屬性對應於 font-stretch CSS 屬性，當使用關鍵字時（不支援百分比值）。
值
字型拉伸值（字串）。可以是以下之一：ultra-condensed、extra-condensed、condensed、semi-condensed、normal（預設）、semi-expanded、expanded、extra-expanded、ultra-expanded。
該屬性可用於獲取或設定字型拉伸值。
示例
在此示例中，我們將使用 fontStretch 屬性的每種受支援的值來顯示文字“Hello World”。每個案例中還會透過讀取屬性來顯示拉伸值。
HTML
<canvas id="canvas" width="700" height="310"></canvas>
JavaScript
首先，我們獲取 HTML 檔案中宣告的 canvas，並用它來獲取稍後用於繪製文字的 CanvasRenderingContext2D。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
示例中的下一步是載入一個可變字型，該字型可以在寬度軸上進行變化。這是必需的，因為 fontStretch 只能拉伸包含有關拉伸時字形如何繪製的資訊的字型——否則文字將使用字型最接近的可用字型拉伸值繪製，通常是正常寬度。
在這種情況下，我們使用 FontFace 為 Inconsolata Google 字型定義一個字體面，該字型支援從 50% 到 200% 的字型寬度（這使我們能夠演示從 ultra-condensed 到 ultra-expanded 的 fontStretch 值）。然後，我們將其新增到文件的 FontFaceSet（document.fonts）中，以便可以用於繪製。
const fontFile = new FontFace(
"Inconsolata",
'url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2") format("woff2")',
{ stretch: "50% 200%" },
);
document.fonts.add(fontFile);
下面的程式碼隨後呼叫 FontFaceSet.load() 來獲取並載入 Google 字型。請注意，此呼叫會設定所需字型的大小，並返回一個在字型載入完成後解析的 promise。
然後，我們將下載的字體面分配給上下文，並使用上下文在每個關鍵字拉伸級別上將文字繪製到 canvas 上。請注意，這裡再次指定了所需字型的大小（這不必與載入的字型大小匹配）。
document.fonts.load("30px Inconsolata").then(
() => {
ctx.font = "30px 'Inconsolata'";
// Default (normal)
ctx.fillText(`Hello world (default: ${ctx.fontStretch})`, 5, 20);
ctx.fontStretch = "ultra-condensed";
ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 50);
ctx.fontStretch = "extra-condensed";
ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 80);
ctx.fontStretch = "condensed";
ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 110);
ctx.fontStretch = "semi-condensed";
ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 140);
ctx.fontStretch = "extra-condensed";
ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 170);
ctx.fontStretch = "semi-expanded";
ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 200);
ctx.fontStretch = "expanded";
ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 230);
ctx.fontStretch = "extra-expanded";
ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 260);
ctx.fontStretch = "ultra-expanded";
ctx.fillText(`Hello world (${ctx.fontStretch})`, 5, 290);
},
(err) => {
console.error(err);
},
);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-fontstretch |
瀏覽器相容性
載入中…