如何使用JavaScript在畫布中繪制壓縮文本？

Question

我是javascript新手，需要壓縮使用Java腳本繪制到畫布中的文本。 w3schools建議可以做到這一點。

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

我在CSS語法中注意到， font-stretch: condensed或font-stretch: expanded似乎都無法工作，並且w3schools中的示例中的注釋也指出， 沒有瀏覽器支持font-stretch屬性 。 我也知道此屬性僅對任何字體都無效 。

 var can = document.getElementById("textCanvas"); var ctx = can.getContext("2d"); ctx.font = "120px Arial Bold Italic"; ctx.font.fontStretch="ultra-condensed"; //condensed”; // expanded”; ctx.fillStyle = "red"; ctx.textAlign = "center"; ctx.fillText("NAME", 100, 100); 

 <canvas id="textCanvas" width="200" height="200" style="border: 1px solid black"></canvas> 

使用font-stretch沒有區別。 我還嘗試了font-kerning和font-size-adjust 。 如何壓縮字體？

Answer 1

ctx.font是一個字符串 。 在其上設置fontStretch或其他任何設置都不會更改它。

現在，正確的語法與CSS font屬性相同：

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"`

因此，僅設置字體伸展，最小的是

ctx.font = "<font-stretch-css3> <'font-size'> <'font-family'>"

例如ctx.font = "ultra-condensed 18px LeagueMonoVariable"; 會做。

但是，您將面臨與CSS相同的局限性：瀏覽器支持受到限制，只能使用幾種字體，而在Chrome中，您需要在font-face聲明中定義font-stretch。

 // This example seems to work only on Chrome, as does the MDN's example const font = '18px "LeagueMonoVariable"'; document.fonts.load(font) .then(() => { const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d'); ['ultra-condensed', 'condensed', 'expanded', 'ultra-expanded'].forEach((stretch, i) => { ctx.font = stretch + ' ' + font; ctx.fillText('Hello ' + stretch + ' World', 10, i * 30 + 30); }); }); 

 /* borrowed from https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch */ /* This example uses the League Mono Variable font, developed by Tyler Finck (https://www.tylerfinck.com/) and used here under the terms of the SIL Open Font License, Version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web */ @font-face { src: url('https://tylerfinck.com/leaguemonovariable/LeagueMonoVariable.ttf'); font-family: 'LeagueMonoVariable'; font-style: normal; font-stretch: 1% 500%; } 

 <canvas id="canvas" width="500"></canvas> 

使用其他瀏覽器的Chrome輸出 。

另外請注意，Chrome上下文上下文font顯然不支持百分比符號（ n% font-size font-family ）。

---

考慮到所有這些限制，可能值得考慮使用替代解決方案，最好的替代方法可能是將變體字體作為單獨的字體使用，並盡可能簡單地使用它。

 Promise.all([ document.fonts.load("18px Roboto"), document.fonts.load("18px 'Roboto Condensed'") ]) .then(() => { const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d'); ctx.font = "18px Roboto"; ctx.fillText('Hello World', 10, 30); ctx.font = "18px 'Roboto Condensed'"; ctx.fillText('Hello condensed World', 10, 60); }); 

 <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed&display=swap" rel="stylesheet"> <canvas id="canvas" width="500"></canvas>