CanvasRenderingContext2D:fontStretch 属性
Canvas API 的 CanvasRenderingContext2D.fontStretch
属性指定绘制文本时字体如何被扩展或压缩。
该属性对应于 CSS 中的 font-stretch
属性,当使用关键字时(百分比值不支持)。
值
字体的伸展值作为字符串。支持的值包括:ultra-condensed
、extra-condensed
、condensed
、semi-condensed
、normal
(默认)、semi-expanded
、expanded
、extra-expanded
、ultra-expanded
。
该属性可以用于获取或设置字体的伸展值。
示例
以下示例演示了如何使用 fontStretch
属性在 Canvas 中显示文本“Hello World”,并展示了每种支持的 fontStretch
值的效果。每个情况下,都会显示相应的伸展值。
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 字体,支持从 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()
来获取并加载谷歌字体。注意,这个调用设置了所需的字体大小,并返回一个在字体加载完成后兑现的 promise。
接着,将下载的字体应用到上下文,并使用上下文根据每个关键字的伸展级别绘制文本。请注意,再次指定了所需字体的大小(这不必与加载的字体大小匹配)。
document.fonts.load("30px Inconsolata").then(
() => {
ctx.font = "30px 'Inconsolata'";
// 默认值(normal)
ctx.fillText(`Hello world(默认:${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 = "semi-expanded";
ctx.fillText(`Hello world(${ctx.fontStretch})`, 5, 170);
ctx.fontStretch = "expanded";
ctx.fillText(`Hello world(${ctx.fontStretch})`, 5, 200);
ctx.fontStretch = "extra-expanded";
ctx.fillText(`Hello world(${ctx.fontStretch})`, 5, 230);
ctx.fontStretch = "ultra-expanded";
ctx.fillText(`Hello world(${ctx.fontStretch})`, 5, 260);
},
(err) => {
console.error(err);
},
);
结果
规范
Specification |
---|
HTML Standard # dom-context-2d-fontstretch |
浏览器兼容性
BCD tables only load in the browser