如何使用javascript在画布中绘制压缩文本？

我是javascript新手，需要使用java脚本将绘制的文本压缩到画布中。这表明这是可以做到的

JavaScript syntax: object.style.fontStretch="expanded"

但是，我注意到在css语法中，

font-stretch:condensed

和

font-stretch:expanded

似乎都不起作用，并且还声明没有浏览器支持font-stretch属性。我也知道这一点

var can=document.getElementById（“textCanvas”）；
var ctx=can.getContext（“2d”）；
ctx.font=“120px Arial Bold Italic”；
ctx.font.fontstract=“超浓缩”//浓缩“；//扩大”；
ctx.fillStyle=“红色”；
ctx.textAlign=“中心”；
ctx.fillText（“名称”，100100）
ctx.font
是一个字符串。设置
fontStretch
或任何其他设置都不会改变它

现在，正确的语法与属性相同：

ctx.font = "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar"`

/*借用自https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch */
/*
此示例使用由开发的League Mono变量字体
泰勒·芬克(https://www.tylerfinck.com/)在这里使用
SIL开放式字体许可证1.1版的条款：
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/
@字体{
src:url（'https://tylerfinck.com/leaguemonovariable/LeagueMonoVariable.ttf');
字体系列：“LeagueMonoviable”；
字体风格：普通；
字体拉伸：1%500%；
}
ctx.font
是一个字符串。设置
fontStretch
或任何其他设置都不会改变它

现在，正确的语法与属性相同：

ctx.font = "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar"`

/*借用自https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch */
/*
此示例使用由开发的League Mono变量字体
泰勒·芬克(https://www.tylerfinck.com/)在这里使用
SIL开放式字体许可证1.1版的条款：
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/
@字体{
src:url（'https://tylerfinck.com/leaguemonovariable/LeagueMonoVariable.ttf');
字体系列：“LeagueMonoviable”；
字体风格：普通；
字体拉伸：1%500%；
}
<代码> <代码>只需搜索“压缩字体画布JS”，你就可以找到一些可以下载的脚本。你也可以考虑将文本绘制到画布上，然后拉伸画布：）搜索“压缩字体画布JS”。你可能会发现一些可以下载的脚本。你也可以考虑将文本绘制到画布上，然后拉伸画布：谢谢，我尝试了你的例子和两个字体都成功地浓缩和扩展。第二个示例适用于Google Chrome和Safari。第一个只适用于谷歌浏览器。不幸的是，我无法将任何一种字体转换为斜体，这是我的优先事项之一。我需要考虑Erth-Seiordl的建议，把文本画到画布上，然后拉伸。canvas@Greg，但现在的问题是。。。“如何使用javascript在画布中绘制压缩文本？”。我们只能回答被问到的问题。但是如果你仔细阅读我的答案，你会发现把它改成斜体并不难：这是它的原因，所以只需在用作
font
的字符串前面加上
italic
。凯伊多，是的，我的问题不包括斜体字。通过在斜体前面加上前缀，您的第二个示例可以同时使用Safari和Google Chrome。你是一颗宝石！这个答案教会了我很多，节省了我很多时间。谢谢。谢谢，我尝试了你的两个例子，两种字体都成功地压缩和扩展了。第二个示例适用于Google Chrome和Safari。第一个只适用于谷歌浏览器。不幸的是，我无法将任何一种字体转换为斜体，这是我的优先事项之一。我需要考虑Erth-Seiordl的建议，把文本画到画布上，然后拉伸。canvas@Greg，但现在的问题是。。。“如何使用javascript在画布中绘制压缩文本？”。我们只能回答被问到的问题。但是如果你仔细阅读我的答案，你会发现把它改成斜体并不难：这是它的原因，所以只需在用作
font
的字符串前面加上
italic
。凯伊多，是的，我的问题不包括斜体字。通过在斜体前面加上前缀，您的第二个示例可以同时使用Safari和Google Chrome。你是一颗宝石！这个答案教会了我很多，节省了我很多时间。谢谢