此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
CanvasRenderingContext2D:fontStretch 属性
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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 # dom-context-2d-fontstretch |
浏览器兼容性
Loading...