HTML5画布 - 如何拉伸文本？

Question

在我的html 5画布中，我绘制文本（必须在一行上），但它需要是恒定的字体大小和样式，我拥有的空间宽度也是恒定的。因此，文本需要适合该空间，但当文本太长并超过空间时就会出现问题。

那么，有没有一种方法可以水平拉伸/压缩文本？（就像在PhotoShop中）

类似于将其转换为图像，然后更改图像的宽度？不确定这是否是最佳方法...

谢谢

- omega

---

你想要拉伸/压缩文字，但是文字需要保持一个恒定的大小吗？ - Jake Long

它在拉伸之前需要保持恒定的大小。例如，字体样式必须为30px Arial，如果超出边界，则进行80%的宽度调整。 - omega

@omega：你是想只在它不适合的情况下调整大小，还是总是将其调整为空间的确切宽度？ - pimvdb

只有当它不适合时，才调整大小以适应。 - omega

你是想要缩放文本，还是只是水平压缩它？如果你只想压缩它，fillText有一个参数可以实现。 - MrOBrian

我想要水平挤压它。 - omega

Answer 1

您可以使用 measureText 先确定文本的大小，然后根据需要对画布进行缩放：http://jsfiddle.net/eGjak/887/.

var text = "foo bar foo bar";
ctx.font = "30pt Arial";

var width = ctx.measureText(text).width;
if(width <= 100) {
    ctx.fillText(text, 0, 100);
} else {
    ctx.save();
    ctx.scale(100 / width, 1);
    ctx.fillText(text, 0, 100);
    ctx.restore();
}

- pimvdb

---

这实际上与按照@MrOBrian的建议提供maxWidth的效果相同：http://jsfiddle.net/eGjak/888/。 - pimvdb

+1 我不知道 Canvas 的比例尺函数。这是一个比我的答案好得多的答案。 - Denys Séguret

Answer 2

一个简单的解决方案是将文本绘制到另一个（内存中的）画布中，然后使用drawImage将画布内容粘贴到真实的目标画布中。

类似这样（根据您的需求进行参数化，这里按比例为100到80进行拉伸）:

var tempimg = document.createElement('canvas');
tempimg.width = 100;
tempimg.height = 10;
oc = tempimg.getContext('2d');
oc.fillText(...)
yourdestcontext.drawImage(tempimg, 0, 0, 100, 10, x, y, 80, 10);

- Denys Séguret

---

对于宽度，我可以使用百分比而不是像素吗？ - omega

在这种情况下，由于源宽度为100像素，是的。否则，您必须根据百分比计算目标宽度。 - Denys Séguret