使用画布动态更改文本大小

问题描述

我正在使用画布无论如何，我想创建一个创建画布的函数，然后将获取一些文本并确保它适合图像。因此，如果需要，字母会变小。我将如何做到这一点？

如果需要，我可以使用 jimp，但有人有这样做的功能吗？

解决方法

这是如何在 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。您也可以使用 width 和 height 属性获取画布尺寸。因此，如果您要自己实现这一点，则必须尝试使用边界、大小和字体，直到对结果感到满意为止。

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

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

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

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

canvas javascript jimp