javascript - html5 canvas-如何拉伸(stretch)文本？

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

那有什么办法可以水平拉伸(stretch)/压缩文本？ (例如在PhotoShop中)

诸如将其转换为图像然后更改图像的宽度之类的东西？不确定这是否是最好的方法...

谢谢

最佳答案

您可以先使用measureText来确定文本的大小，然后根据需要缩放 Canvas :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();
}

关于javascript - html5 canvas-如何拉伸(stretch)文本？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12113177/