使用 canvas 动态更改文本大小

Question

使用包 node-canvas，我需要呈现一个用户名 - 一个可能相当大的用户名。我需要确保文本可以动态缩放它的大小以适合预定义的图像，这样名称就不会被截断，它只会变小以便可以呈现更多字符。我考虑过使用 jimp 和 sharp，但找不到最佳结果。

谢谢。

Answer 1

这是在 canvas 中显示 Javascript 文本的方法：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

您可以将字体设置为：

ctx.font = "30px Arial";

从严格的技术角度来看，这就是您所需要的。但是，由于您有大小限制，因此您需要遵守一些边界限制。要查看什么尺寸适合什么尺寸，您可以使用 measureText。您也可以获得 canvas 维度，使用 width 和 height 属性。因此，如果您要自己实现，则必须对边界、大小和字体进行试验，直到对结果满意为止。

Answer 2

HTML / CSS中有不同类型的单位，可以是绝对的，也可以是相对的。 CSS EM, PX, PT, CM, IN…

例如，如果您使用“10px”作为默认字体高度，则在任何屏幕尺寸上看起来都是一样的，但是如果您使用“10vw”，则高度会随着宽度的变化而变化window.

也可以用“%”来达到同样的效果，通常与父元素的大小有关。

但最好的选择是创建一个事件函数，根据 canvas 大小更改字体宽度，这样字体就不会变得太大或太小。

使用 canvas 动态更改文本大小

Dynamically change the size of text with canvas

javascript

canvas

jimp