javascript - 如何使用 javascript 在 Canvas 中绘制压缩文本？

Question

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

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

我注意到在 css 语法中，font-stretch: condensed 和 font-stretch: expanded 似乎都不起作用，并且 comment in the example in w3schools还指出没有浏览器支持 font-stretch 属性。我也知道这个属性will not work on just any font .

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

所以对于只设置字体拉伸(stretch)，最小值是

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 output对于使用其他浏览器的用户。

另请注意，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>