CanvasRenderingContext2D: fontStretch 属性

CanvasRenderingContext2D.fontStretch 是 Canvas API 的一个属性，用于指定在绘制文本时如何扩展或压缩字体。

当使用关键字时，此属性对应于 font-stretch CSS 属性（不支持百分比值）。

值

字体拉伸值，以字符串形式表示。它可以是以下值之一：ultra-condensed、extra-condensed、condensed、semi-condensed、normal（默认）、semi-expanded、expanded、extra-expanded、ultra-expanded。

此属性可用于获取或设置字体拉伸值。

示例

在此示例中，我们使用 fontStretch 属性的每个支持值来显示文本“Hello World”。通过读取属性，每个案例还显示了拉伸值。

HTML

html
<canvas id="canvas" width="700" height="310"></canvas>

JavaScript

首先，我们获取 HTML 文件中声明的画布，并使用它来获取 CanvasRenderingContext2D，稍后将使用它来绘制文本。

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

示例中的下一步是加载一个可以在宽度轴上变化的可变字体。这是必需的，因为 fontStretch 只能拉伸包含有关拉伸时如何绘制字形的信息的字体 - 否则文本将使用字体最接近的可用字体拉伸值绘制，这通常是正常宽度。

在本例中，我们使用 FontFace 为 Inconsolata Google 字体定义字体面，该字体支持 50% 到 200% 的字体宽度（使我们能够演示从 ultra-condensed 到 ultra-expanded 的 fontStretch 值）。然后，我们将它添加到文档的 FontFaceSet (document.fonts) 中，以便它可以用于绘制。

js
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，当字体加载完成后解析。

然后，我们将下载的字体面分配给上下文，并使用上下文在每个关键字拉伸级别将文本绘制到画布上。请注意，再次指定了所需字体的尺寸（不必与加载的字体尺寸匹配）。

js
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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。